## 一. 前言 在上一文中 [點選跳轉](https://www.cnblogs.com/haoxianrui/p/14088400.html) 通過IDEA整合Docker外掛實現微服務的一鍵部署，但 [youlai-mall](https://github.com/hxrui/youlai-mall.git) 是前後端分離的專案，除了後端微服務的部署之外，當然還少不了前端工程的部署。所以本篇講述如何通過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](https://github.com/hxrui/youlai-mall-admin.git) 是開源專案`有來商城` 分離的管理前端，基於 `vue-element-admin`基礎框架構建的。這裡講述如何將其部署到線上環境。 **1. 專案打包** 執行`npm run build:prod`打包專案，打包生成的檔案在專案根目錄下的dist資料夾。   **2. 專案上傳** 使用FTP工具上傳dist資料夾下的所有檔案至伺服器`/usr/share/nginx/html`目錄下  **3. 專案測試** 重啟nginx ``` docker restart nginx ``` 訪問 [www.youlai.store](http://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](https://github.com/hxrui/youlai-mall.git) 後端和前端都已部署完畢，線上網址 [www.youlai.store](http://www.youlai.store/),目前上線的功能有系統管理模組和OAuth2統一認證授權，商城業務功能和小程式正在開發階段，所以有興趣的朋友一起開發的專案歡迎您的關注和聯絡我（微訊號：haoxianrui）。