Docker實戰 | 第三篇：Docker安裝Nginx，實現基於vue-element-admin框架構建的項目線上部署

一. 前言

在上一文中 點擊跳轉 經過IDEA集成Docker插件實現微服務的一鍵部署，但 youlai-mall
是先後端分離的項目，除了後端微服務的部署以外，固然還少不了前端工程的部署。因此本篇講述如何經過Docker安裝Nginx實現前端Vue項目工程的部署。

二. Docker安裝Nginx

1. 建立目錄

mkdir -p /usr/share/nginx/conf
mkdir -p /usr/share/nginx/html

2. 建立配置文件

touch /usr/share/nginx/conf/nginx.conf

在nginx.conf文件添加以下配置

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen     80;
        server_name  localhost;

        location / {
            root /usr/share/nginx/html;
            index index.html index.htm;
	    }
        # 代理轉發請求至網關，prod-api標識解決跨域問題
	    location /prod-api/ {
            proxy_pass http://www.youlai.store:9999/;
	    }
    }
}

3. 拉取鏡像

docker pull nginx

查看鏡像

docker images

4. 建立容器並啓動

docker run -it -d \
--name nginx \
-p 80:80 \
-v /usr/share/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /usr/share/nginx/html:/usr/share/nginx/html \
nginx

兩個-v 分別表示配置文件和nginx工做空間目錄的映射，冒號左邊是宿主機，右邊是容器的，這樣修改宿主機的配置文件和工做空間就能夠同步到容器

5. 查看容器

docker ps -a

6. 查看nginx啓動日誌

docker logs nginx

7. 啓動、關閉、重啓nginx

docker start nginx
docker stop nginx
docker restart nginx

三. vue-element-admin落地項目線上部署

完成上面的Nginx安裝和相關配置後，接下來開始部署前端項目。

youlai-mall-admin 是開源項目有來商城 分離的管理前端，基於 vue-element-admin基礎框架構建的。這裏講述如何將其部署到線上環境。

1. 項目打包

執行npm run build:prod打包項目，打包生成的文件在項目根目錄下的dist文件夾。

2. 項目上傳

使用FTP工具上傳dist文件夾下的全部文件至服務器/usr/share/nginx/html目錄下

3. 項目測試

重啓nginx

docker restart nginx

訪問 www.youlai.store, 使用帳號/密碼：admin/123456 登陸系統

訪問成功！！

4. 其餘說明

在Nginx配置文件中其中有下面這一段配置

location /prod-api/ {
    proxy_pass http://www.youlai.store:9999/;
}

至於爲何會攔截 prod-api 這段標識進行代理轉發，看下瀏覽器的一個完整請求路徑你應該就會明白。

不管是本地的dev-api仍是線上的prod-api的標識本質上都是解決先後端分離項目的跨域問題，只不過本地使用的vue的proxyTable代理，線上使用的是nginx的代理，手段則是統一的替換標識爲真正的後端地址。

四. 結語

至此 youlai-mall 後端和前端都已部署完畢，線上網址 www.youlai.store,目前上線的功能有系統管理模塊和OAuth2統一認證受權，商城業務功能和小程序正在開發階段，因此有興趣的朋友一塊兒開發的項目歡迎您的關注和聯繫我（微信號：haoxianrui）。