docker部署vue項目的實現步驟

Posted on by

前戲

當我們在本地開發瞭一個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;
    }
}

到此這篇關於docker部署vue項目的實現步驟的文章就介紹到這瞭,更多相關docker部署vue內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：