1、使用Docker和Nginx部署Vue項目的步驟
1、準備好VUE項目，已打包編譯
2、docker環境已完成安裝
3、本地環境上創建nginx目錄，下包括conf，html，logs目錄。用于容器映射（其實是方便修改文件，因為在容器中不方便修改，在修改后restart容器即可加載）
4、拉取nginx鏡像
5、創建容器并映射至之前的目錄
6、啟動容器
7、驗證
2、詳細步驟
2.1、準備Vue項目
確保Vue項目已構建完成，生成靜態文件。在項目根目錄運行以下命令：
npm run build
2.2、docker環境已安裝
docker info
2.3、創建本地映射目錄
在本地環境中自定義一個目錄：示例是在/home/d_app/nginx
# 容器映射目錄
mkdir -p /usr/share/nginx/conf
mkdir -p /usr/share/nginx/html
mkdir -p /usr/share/nginx/logs
在conf目錄下創建配置文件：
# conf配置文件
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 8080;server_name localhost;location / {root /usr/share/nginx/html;index index.html index.htm;}# 代理轉發請求至網關，prod-api標識解決跨域問題# location /prod-api/ {# proxy_pass http://0.0.0.0:9999/;# }}
}
2.4、拉取鏡像
# 拉取鏡像
docker pull nginx# 查看鏡像
docker images
2.5、創建容器并啟動
docker run -it -d \
--name nginx \
-p 8080:8080 \
-v /usr/share/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /usr/share/nginx/html:/usr/share/nginx/html \
-v /usr/share/nginx/logs:/usr/share/nginx/logs \
--restart=always \
nginx
- 重新啟動新的容器
下面代碼-v前面被處理過，可直接復制使用，\ 表示換下一行繼續
-d: 后臺啟動
-p: 宿主機的80端口映射容器的80端口
-v: 掛載宿主機文件或目錄到容器，分別表示配置文件和nginx工作空間目錄的映射，冒號左邊是宿主機，右邊是容器的，這樣修改宿主機的配置文件和工作空間就可以同步到容器
–restart=always: 伴隨docker重啟自動重啟該容器
2.6、創建容器并啟動
# 查看容器docker ps -a# 查看nginx啟動日志docker logs nginx
2.7、啟動、關閉、重啟nginx
# 啟動
docker start nginx# 停止
docker stop nginx# 重啟
docker restart nginx2.8、驗證部署
訪問http://localhost:8080，確認前端應用正常運行。
3、注意事項
- 確保
dist目錄已生成且包含index.html。 - 若需支持SPA路由，必須配置Nginx的
try_files規則。 -
拉取鏡像時，有可能會報錯：Error response from daemon:?Get?"https://registry-1.docker.io/v2/": net/http: request canceled while waiting for connection
)
