下載下傳nginx
docker pull nginx
docker images
# 建立挂載目錄
mkdir -p /home/nginx/conf
mkdir -p /home/nginx/log
mkdir -p /home/nginx/html
容器中的nginx.conf檔案和conf.d檔案夾複制到主控端
# 生成容器
docker run --name nginx -p 80:80 -d nginx
# 将容器nginx.conf檔案複制到主控端
docker cp nginx:/etc/nginx/nginx.conf /home/nginx/conf/nginx.conf
# 将容器conf.d檔案夾下内容複制到主控端
docker cp nginx:/etc/nginx/conf.d /home/nginx/conf/conf.d
# 将容器中的html檔案夾複制到主控端
docker cp nginx:/usr/share/nginx/html /home/nginx/
建立nginx容器之前需要删除之前的容器
# 直接執行docker rm nginx或者以容器id方式關閉容器
# 找到nginx對應的容器id
docker ps -a
# 關閉該容器
docker stop nginx
# 删除該容器
docker rm nginx
# 删除正在運作的nginx容器
docker rm -f nginx
建立新容器
docker run \
-p 80:80 \
--name nginx \
-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /home/nginx/log:/var/log/nginx \
-v /home/nginx/html:/usr/share/nginx/html \
-d nginx:latest
–name nginx 啟動容器的名字
-d 背景運作
-p 80:80 将容器的 80(後面那個) 端口映射到主機的 80(前面那個) 端口
-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf 挂載nginx.conf配置檔案
-v /home/nginx/conf/conf.d:/etc/nginx/conf.d 挂載nginx配置檔案
-v /home/nginx/log:/var/log/nginx 挂載nginx日志檔案
-v /home/nginx/html:/usr/share/nginx/html 挂載nginx内容
nginx:latest 本地運作的版本
\ shell 指令換行
開啟nginx後
上傳打包好的dist 前端檔案
在任意目錄下上傳dist檔案，并建立檔案 dockerfile 。内容如下：
# 設定基礎鏡像
FROM nginx
# 定義作者
MAINTAINER jiangyu
# 将dist檔案中的内容複制到 /usr/share/nginx/html/ 這個目錄下面
COPY dist/ /usr/share/nginx/html/
建構鏡像：
# -t 是給鏡像取名。
# 最後有一個點 “.”，表示使用目前路徑下的 dockerfile 檔案，也可以指定使用其它路徑的。
docker build -t testvue .
檢視新生成的鏡像：
docker images
啟動容器：
# -p ：配置端口映射，格式是外部通路端口：容器内端口
# -d ：背景運作
# --name : 給容器取名
# 最後有 2 個 test-vue,前面一個是給容器取的名字，後面一個是使用的鏡像的名字
docker run -p 3000:80 -d --name testvue testvue
檢視是否運作成功：
docker ps -a
通路192.168.1.29：3000端口：
成功
如果需要删除鏡像：
docker ps -a
docker stop + ID
docker images
docker rmi + ID
如果需要使用域名通路
在建立的nginx檔案：
編寫server.conf檔案：
server {
listen 80;
server_name vue.test;
location ~ {
proxy_pass http://192.168.1.29:3000;
}
}
配置完成之後重新開機nginx、：
docker restart nginx
在本機host部署
通路域名：
成功
如果需要部署多個vue項目，
開啟nginx後
上傳打包好的vue1 前端檔案
在任意目錄下上傳vue1檔案，并建立檔案 dockerfile 。内容如下：
FROM nginx
COPY vue/ /usr/share/nginx/html
FROM nginx
COPY vue1/ /usr/share/nginx/html
在目前目錄下建構鏡像vue1：
docker build -t vue1 .
啟動容器vue1：
docker run -p 8000:80 -d --name vue1 vue1
啟動成功
通路3000端口：
通路8000端口：
成功
如果需要用域名通路
在主機host中添加vue1.test
在 /home/nginx/conf/conf.d/下修改server.conf檔案：
添加一個server子產品：
server {
listen 80;
server_name vue1.test;
location ~ {
proxy_pass http://192.168.1.29:8000;
}
}
重新開機nginx：
docker restart nginx
通路成功
之前的vue.test也是成功