對於後端開發的小夥伴，可以只瞭解後臺服務的釋出，但是如果搭建個人的專案或者做私活的話。前臺的部署的也是離不開的話題。本文將介紹如何釋出vue的前段專案。

　　這裡樓主主要依賴nginx釋出vue。

　　1.安裝釋出vue

　　老生常談，首先需要使用docker安裝nginx。

　　1.檢視映象

　　docker search nginx 複製程式碼

　　1.

　　2.拉取映象

　　docker pull nginx 複製程式碼

　　1.

　　3.檢視映象

　　docker images 複製程式碼

　　1.

　　4.vue打包

　　此時，我們需要將vue打包，需要執行打包命令，如果沒有特殊修改請執行：

　　npm run build 複製程式碼

　　1.

　　5.準備工作

　　1.新建資料夾

　　分別新建

　　/usr/local/nginx/system：前臺包存放位置

　　/usr/local/nginx/conf：配置檔案存放位置

　　/usr/local/nginx/log：日誌檔案存放位置

　　2.掛載vue包

　　新建/usr/local/nginx/system資料夾(作為宿主機掛載到docker容器的資料夾)，在vue打包的檔案中獲取dist檔案，並將資料夾放於/usr/local/nginx/system中。

　　3.掛載nginx配置

　　將nginx.conf複製到/usr/local/nginx/conf中，下文附上nginx配置。

　　worker_processes 1;

　　events {

　　worker_connections 1024;

　　}

　　http {

　　include mime.types;

　　default_type application/octet-stream;

　　#指定日誌路徑

　　access_log /var/log/nginx/access.log;

　　error_log /var/log/nginx/error.log;

　　sendfile on;

　　keepalive_timeout 65;

　　server {

　　listen 80;

　　server_name localhost;

　　#charset koi8-r;

　　#access_log logs/host.access.log main;

　　location ^~/system { #當訪問路徑為 ip/system時 會訪問/usr/share/nginx/system/dist下的靜態檔案 然後靜態檔案會呼叫介面 ajax完成

　　alias /usr/share/nginx/system/dist; #指定dist檔案存放路徑

　　index index.html;

　　try_files $uri $uri/ /system/index.html;

　　}

　　error_page 500 502 503 504 /50x.html;

　　location = /50x.html {

　　root html;

　　5.執行映象

　　docker run --name nginx -d -p 80:80 --net=host -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /usr/local/nginx/log:/var/log/nginx -v /usr/local/nginx/system:/usr/share/nginx/system nginx

　　引數講解：(ps 宿主機的資料夾需要新建) docker run --name nginx：容器名稱

　　-d -p 80:80 將容器中的80埠，指定到宿主機的80埠。

　　--net=host：以host方式啟動鄭州看精神科醫院哪家好http://www.juenpt.com/

　　-v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf ：宿主機的/usr/local/nginx/conf/nginx.conf檔案對映到容器的/etc/nginx/nginx.conf，實際是以/usr/local/nginx/conf/nginx.conf為配置檔案啟動。

　　-v /usr/local/nginx/log:/var/log/nginx：宿主機/usr/local/nginx/log對映到容器的/var/log/nginx 存放log日誌，與nginx搭配使用。

　　-v /usr/local/nginx/system:/usr/share/nginx/system ：宿主機/usr/local/nginx/system資料夾與容器/usr/share/nginx/system對映，將vue的dist檔案放入/usr/local/nginx/system，容器中nginx.conf指定跳轉的目錄為/usr/share/nginx/system。

　　nginx 映象名稱

　　上面的對映的流程是，在啟動時/usr/local/nginx/conf/nginx.conf會複製到/etc/nginx/nginx.conf中，同理docker容器下log檔案也會對映到/usr/local/nginx/log，/usr/share/nginx/system會對映到docker容器的/usr/share/nginx/system中。

　　2.總結

　　nginx釋出vue原理是當你在web瀏覽器中輸入xxxx/system時(路徑可以多種配置)，nginx會監聽web的80埠。如果路徑在配置有攔截，那麼會到配置的檔案路徑中獲取(上文配置alias /usr/share/nginx/system/dist)。這樣就能夠獲取到vue的前臺靜態檔案了。