一.基於docker安裝nginx
1.安裝docker: 參考docker安裝步驟
2.安裝nginx
拉取鏡象
docker pull ngnix
啟動臨時容器
目的：將容器中需要文件夾復制出來做映射備用
docker run --name tmp-ng -d nginx
新建本地文件夾
mdkir -p /docker/nginx
將容器目錄復制出來
docker cp -a tmp-ng:/usr/share/nginx/html /docker/nginx/html
docker cp tmp-ng:/etc/nginx/nginx.conf /docker/nginx/nginx.conf
docker cp tmp-ng:/etc/nginx/conf.d /docker/nginx/conf.d
刪除臨時鏡象
docker stop tmp-ng
docker rm tmp-ng(CONTAINER ID)
運行容器實例並映射到本地目錄
docker run --name nginx-1 -e TZ="Asia/Shanghai" -d -p 80:80 \
-v /docker/nginx/html:/usr/share/nginx/html \
-v /docker/nginx/nginx.conf:/etc/nginx/nginx.conf \
-v /docker/nginx/conf.d:/etc/nginx/conf.d \
-v /docker/nginx/logs:/var/log/nginx \
nginx
訪問端口出現nginx默認頁面
二.打包vue項目部署到nginx
1.創建測試vue項目
vue init webpack vue01
cd vue01
npm install
npm run dev
npm run build
最終在vue01目錄生成dist資源文件
打開index.html，如出現白板可能是相對路徑問題，設置index.html中路徑為相對路徑即可
最終訪問出現如下界面，即成功：
2.打包部署到nginx
打包成dist.zip
使用lrzsz命令工具上傳到 /docker/nginx/html
解壓：unzip dist.zip -d ./
修改defalut.conf (windos上為nginx.conf)
docker restart nginx-1
瀏覽器訪問 ip:80，調轉指定靜態頁面
結束！