技術標籤：webvue

首先在部署環境前，我們需要檢視下專案程式碼的api.js裡面請求的後端地址，先進行更改，比如你準備在伺服器ip為：11.22.33.44上部署環境，那麼你的請求地址要先改好，然後再開始部署操作

1. 我們將專案程式碼上傳到伺服器上比如專案程式碼目錄名叫:test
2. 在伺服器上安裝node.js,具體安裝步驟詳見上一篇部落格。
3. 安裝完成後我們就進入到專案根目錄test下開始構建專案

npm install -g @vue/cli       #安裝腳手架
npm install						 #安裝依賴
npm run build					#構建打包

打包完成後我們會在專案根目錄test下生成一個dist資料夾

1. 下載nginx映象

docker pull nginx

2. 建立 nginx config配置檔案

vi nginx config

內容如下

server {
    listen       80;
    server_name  localhost; # 修改為docker服務宿主機的ip，比如我之前說的11.22.33.44

    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;
    }
}
 

接下來開始編寫dockerfile
在專案根目錄下建立Dockerfile檔案

vi Dockerfile

寫入下面內容

FROM nginx

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY dist/ /usr/share/nginx/html/

然後在專案根目錄下構建映象

docker build -t  dateweb .           #注意後面有個點

構建完成後啟動容器

docker run -d -p 8080:80 dateweb

然後我們就可以在瀏覽器上訪問http://11.22.33.44:8080