docker 安装 nginx 部署Vue前端项目

devtools/2025/3/20 3:59:11/

1 安装 docker

安装docker详细步骤

安装docker报错解决方案

2 安装 nginx

2.1 拉取镜像

拉取1.18.0版本的镜像

docker pull nginx:1.18.0

查看镜像

2.2 创建实例并启动

创建并启动实例

# 随便启动一个nginx实例，只是为了复制出配置
docker run -p 80:80 --name nginx -d nginx:1.18.0
# 将容器内的配置文件拷贝到当前目录/root/docker   
docker container cp nginx:/etc/nginx .
# 修改文件名称 将 nginx 修改为 conf
mv nginx conf
# 将 conf 移动到/root/docker/nginx 下
mkdir nginx
mv conf nginx/
# 将容器中的html文件夹复制到当前目录/root/docker/nginx/   
docker cp nginx:/usr/share/nginx/html /root/docker/nginx/
# 删除随便创建的nginx实例
docker stop nginx
docker rm 容器ID

# 进入 /root/docker/nginx下创建文件夹logs和html
mkdir logs
# 创建nginx实例并运行
docker run --net=host  --name nginx --restart=always --privileged=true \
-v /root/xyd/docker/nginx/html:/usr/share/nginx/html \
-v /root/xyd/docker/nginx/logs:/var/log/nginx \
-v /root/xyd/docker/nginx/conf:/etc/nginx \
-d nginx:1.18.0

注意：这里使用 --net=host ：表示容器和宿主主机共享Network namespace，不在使用 -p 80:80做端口映射，因为设置端口映射，则只有该映射端口起作用，nginx配置的其他端口无效。

命令解释，如下：

命令	解释
-p 81:80	端口映射，容器的80端口映射至虚拟主机的81端口
--net=host	容器和宿主主机共享Network namespace
--name nginx	容器名称
--restart=always	开启启动
--privileged=true	允许容器以超级用户(root)权限运行
-v /root/xyd/docker/nginx/html:/usr/share/nginx/html	卷轴映射，挂载nginx内容目录
-v /root/xyd/docker/nginx/logs:/var/log/nginx	卷轴映射，挂载nginx日志文件
-v /root/xyd/docker/nginx/conf:/etc/nginx	卷轴映射，挂载niginx相关配置
-d	后端运行
\	换行

2.3 测试访问

使用浏览器访问虚拟机地址

3 部署前端项目

3.1 上传前端的 dist 文件挂在/usr/share/nginx/html/下

3.3 修改 nginx 配置

编写相关项目的配置文件test.conf，放在conf.d文件夹下，具体内容如下：

（注意：nginx.conf中配置包含conf.d文件夹下所有的.conf文件）

server {listen       88;server_name  localhost;#charset koi8-r;#access_log  /var/log/nginx/host.access.log  main;location / {# root指令指定了请求资源的根目录root   /usr/share/nginx/html/dist;# index指令指定了默认的索引文件index  index.html index.htm;# try_files指令用于按顺序检查文件或目录是否存在# 首先尝试按照请求的URI去寻找对应的文件，如果找不到，再尝试将请求作为目录处理，如果还是找不到，最后就返回/index.html文件try_files $uri $uri/ /index.html;}location /dev-api/ {proxy_pass http://localhost:89;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;rewrite ^/dev-api/(.*)$ /$1 break;}}