目錄
- 前戲
- 部署
- 獲取nginx鏡像
- 創(chuàng)建 nginx config配置文件
- 創(chuàng)建Dockerfile文件
- 生成生成環(huán)境包
- 構(gòu)建docker鏡像
- 查看本地鏡像
- 啟動(dòng)docker容器
- 訪問(wèn)
- 跨域
前戲
當(dāng)我們?cè)诒镜亻_(kāi)發(fā)了一個(gè)vue項(xiàng)目之后，肯定是想部署到服務(wù)器上供其他人訪問(wèn)，之前介紹過(guò)使用cntos7+nginx部署項(xiàng)目，今天讓我們來(lái)使用docker來(lái)部署我們的前端項(xiàng)目，首先你已經(jīng)安裝好了docker，并熟悉基本的docker命令。
部署
獲取nginx鏡像
docker pull nginx
創(chuàng)建 nginx config配置文件
在項(xiàng)目根目錄下創(chuàng)建文件default.conf，寫(xiě)入如下內(nèi)容
server {
listen 80;
server_name localhost; # 修改為docker服務(wù)宿主機(jī)的ip
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
該配置文件定義了首頁(yè)的指向?yàn)?code>/usr/share/nginx/html/index.html, 所以我們可以一會(huì)把構(gòu)建出來(lái)的index.html文件和相關(guān)的靜態(tài)資源放到/usr/share/nginx/html目錄下。
創(chuàng)建Dockerfile文件
在項(xiàng)目根目錄下創(chuàng)建Dockerfile文件，寫(xiě)入下面內(nèi)容
FROM nginx MAINTAINER zouzou RUN rm /etc/nginx/conf.d/default.conf ADD default.conf /etc/nginx/conf.d/ COPY dist/ /usr/share/nginx/html/
說(shuō)明
- FROM nginx：該鏡像是基于nginx:latest鏡像構(gòu)建的
- MAINTAINER zouzou：添加說(shuō)明
- RUN rm /etc/nginx/conf.d/default.conf：刪除目錄下的default.conf文件
- ADD default.conf /etc/nginx/conf.d/：將default.conf復(fù)制到/etc/nginx/conf.d/下，用本地的default.conf配置來(lái)替換nginx鏡像里的默認(rèn)配置
- COPY dist/ /usr/share/nginx/html/：將項(xiàng)目根目錄下dist文件夾（構(gòu)建之后才會(huì)生成）下的所有文件復(fù)制到鏡像/usr/share/nginx/html/目錄下
生成生成環(huán)境包
首先確保安裝了node.js，npm可用
在項(xiàng)目根目錄下執(zhí)行下面命令（和package.json文件同級(jí)）
安裝依賴(lài)
npm install
構(gòu)建
npm run build
執(zhí)行結(jié)束之后會(huì)在項(xiàng)目根目錄下生成一個(gè)dist的文件夾
構(gòu)建docker鏡像
docker build -t zz-mms .
注意不要少了最后的“.”(點(diǎn))
-t是給鏡像命名，.(點(diǎn))是基于當(dāng)前目錄的Dockerfile來(lái)構(gòu)建鏡像
查看本地鏡像
docker images | grep zz-mms
到這里我們的vue應(yīng)用鏡像已經(jīng)創(chuàng)建成功，接下來(lái)，我們基于該鏡像啟動(dòng)一個(gè)docker容器
啟動(dòng)docker容器
docker run -d -p 9090:80 --name mms zz-mms
- docker run：基于鏡像啟動(dòng)一個(gè)容器
- -d：后臺(tái)方式啟動(dòng)
- -p 9090:80: 端口映射，將宿主機(jī)的9090端口映射到容器的80端口
- –name：容器名，我起的叫mms
- zz-mms：要啟動(dòng)的鏡像名稱(chēng)
查看啟動(dòng)的容器
docker ps
訪問(wèn)
現(xiàn)在我們已經(jīng)啟動(dòng)了，訪問(wèn)宿主機(jī)的地址:9090就可以看到我們部署的網(wǎng)站了
跨域
如果你的后端接口是在別的服務(wù)器上部署的，這時(shí)候我們的default.conf就要加一個(gè)反向代理，使用下面的default.conf，然后重新構(gòu)建docker鏡像，啟動(dòng)
server {
listen 80;
server_name 49.235.160.132; # 修改為docker服務(wù)宿主機(jī)的ip
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /pro-api{ # pro-api是vue項(xiàng)目里.env.production里的地址
proxy_pass 1.1.1.1; # 這里寫(xiě)的是你后端接口的地址
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
