docker 安装 nginx 发布Vue项目

时间：2024-10-20 07:45:23

目录

1.搜索nginx镜像

2.拉取nginx镜像

3.运行镜像

4.拷贝nginx配置文件到主机目录，为文件映射做准备（直接映射会出错）

5.停止运行容器并删除容器

6.重新启动容器（映射相应的目录文件）

7.访问默认页面

8.发布Vue项目

9.配置反向代理（前后端分离，基本上都需要反向代理来解决跨域问题）

10.实战案例：发布开源项目vue3-element-admin

1.搜索nginx镜像

docker search nginx

2.拉取nginx镜像

docker pull nginx:latest

 查看一下拉取的镜像

docker images

3.运行镜像

docker run -d --name nginx -p 80:80 -p 443:443 nginx:latest

 查看运行情况：

docker ps -a

4.拷贝nginx配置文件到主机目录，为文件映射做准备（直接映射会出错）

 nginx配置文件、html文件、logs日志文件

docker cp d36:/etc/nginx/ /home/nginx/
docker cp d36:/etc/nginx/ /home/nginx/conf/
docker cp d36:/usr/share/nginx/html /home/nginx/html
docker cp d36:/var/log/nginx/ /home/nginx/logs/

注意： 这里的docker cp命令有时候会报诡异的错误。有时候不会自动创建文件夹，有时候又会多复制一个路径层。

确保复制的文件是如下的结构：，如果不是，就手动改成这种结构。

5.停止运行容器并删除容器

docker stop d36
docker rm d36

6.重新启动容器（映射相应的目录文件）

docker run -d  --name nginx -p 80:80 -p 443:443 -v /home/nginx/:/etc/nginx/ -v /home/nginx/logs:/var/log/nginx -v /home/nginx/html:/usr/share/nginx/html -v /home/nginx/conf:/etc/nginx/ --privileged=true     -e TZ=Asia/Shanghai nginx:latest

如果有ssl证书的话，把证书位置也映射一下：

docker run -d  --name nginx -p 80:80 -p 443:443 -v /home/nginx/:/etc/nginx/ -v /home/nginx/logs:/var/log/nginx -v /home/nginx/html:/usr/share/nginx/html -v /home/nginx/ssl:/etc/nginx/ssl -v /home/nginx/conf:/etc/nginx/ --privileged=true     -e TZ=Asia/Shanghai nginx:latest

 

查看运行情况：

docker ps -a

7.访问默认页面

8.发布Vue项目

9.配置反向代理（前后端分离，基本上都需要反向代理来解决跨域问题）

nginx的配置文件有两个

配置接口跨域我们只需要配置文件②即可。

比如将：/api/标识代理到http://xxxxxx/

  

location / {
            try_files $uri $uri/ /;
        }

进入nginx容器

docker exec -it 3b5 bash

重启nginx服务 

nginx -s reload

10.实战案例：发布开源项目vue3-element-admin

vue3-element-admin: 基于 vue-element-admin 升级的 vue3 版本后台管理解决方案，技术栈： Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 。

①使用webstorm拉取项目

② 安装依赖

npm install

③打包

npm run build:prod

博主在打包过程中报错失败了


重新打包。

④ 发布项目

⑤接口跨域了，我们需要配置一下反向代理

 # 代理转发请求至网关，prod-api标识解决跨域, 线上接口地址，注意后面/
    location /prod-api/ {
        proxy_pass /;
    }

重启nginx

进入nginx容器

docker exec -it 3b5 bash

重启nginx服务 

nginx -s reload

 ⑥访问

结尾、扫一扫下方微信名片即可+博主徽信哦 ↓↓ ↓↓ ↓↓ ↓↓ ↓↓ ↓↓ ↓↓ ↓↓  ↓↓↓

相关文章