docker--部署vue項目

前戲

當我們在本地開發了一個vue項目之後，肯定是想部署到伺服器上供其他人通路，之前介紹過使用cntos7+nginx部署項目，今天讓我們來使用docker來部署我們的前端項目，首先你已經安裝好了docker，并熟悉基本的docker指令。

部署

擷取nginx鏡像

docker pull nginx      

建立 nginx config配置檔案

在項目根目錄下建立檔案

default.conf，寫入如下内容

server {
    listen       80;
    server_name  localhost; # 修改為docker服務主控端的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;
    }
}      

 該配置檔案定義了首頁的指向為 

/usr/share/nginx/html/index.html

, 是以我們可以一會把建構出來的index.html檔案和相關的靜态資源放到

/usr/share/nginx/html

目錄下。

建立Dockerfile檔案

在項目根目錄下建立Dockerfile檔案，寫入下面内容

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/      

說明

FROM nginx：該鏡像是基于nginx:latest鏡像建構的

MAINTAINER zouzou：添加說明

RUN rm /etc/nginx/conf.d/default.conf：删除目錄下的default.conf檔案

ADD default.conf /etc/nginx/conf.d/：将default.conf複制到/etc/nginx/conf.d/下，用本地的default.conf配置來替換nginx鏡像裡的預設配置

COPY dist/ /usr/share/nginx/html/：将項目根目錄下dist檔案夾（建構之後才會生成）下的所有檔案複制到鏡像/usr/share/nginx/html/目錄下       

生成生成環境包

首先確定安裝了node.js，npm可用

在項目根目錄下執行下面指令（和package.json檔案同級） 

安裝依賴

npm install      

建構

npm run build      

執行結束之後會在項目根目錄下生成一個dist的檔案夾

建構docker鏡像

docker build -t zz-mms .      

注意不要少了最後的“.”(點)

-t是給鏡像命名，.(點)是基于目前目錄的Dockerfile來建構鏡像

檢視本地鏡像

docker images | grep zz-mms      

到這裡我們的vue應用鏡像已經建立成功，接下來，我們基于該鏡像啟動一個docker容器

啟動docker容器

docker run -d -p 9090:80 --name mms zz-mms      

docker run：基于鏡像啟動一個容器

-d：背景方式啟動

-p 9090:80: 端口映射，将主控端的9090端口映射到容器的80端口

--name：容器名，我起的叫mms

zz-mms：要啟動的鏡像名稱      

檢視啟動的容器

docker ps      

 通路

現在我們已經啟動了，通路主控端的位址:9090就可以看到我們部署的網站了

跨域

如果你的後端接口是在别的伺服器上部署的，這時候我們的default.conf就要加一個反向代理，使用下面的default.conf，然後重新建構docker鏡像，啟動

server {
    listen       80;
    server_name   49.235.160.132; # 修改為docker服務主控端的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項目裡.env.production裡的位址
    proxy_pass 1.1.1.1;  # 這裡寫的是你後端接口的位址
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}