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

一. 前言

在上一文中 傳送門 通過IDEA集成Docker插件實現微服務的一鍵部署，但 youlai-mall
是前后端分離的項目，除了后端微服務的部署之外，當然還少不了前端工程的部署。所以本篇講述如何通過Docker安裝Nginx實現前端Vue項目工程的部署。

二. Docker安裝Nginx

1. 創建目錄

mkdir -p /etc/nginx /opt/nginx/html

2. 創建配置文件

touch /etc/nginx/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; # nginx工作目錄是容器的而非宿主機
            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 /etc/nginx/nginx.conf:/etc/nginx/nginx.conf \
-v /opt/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）。