Docker nginx容器部署前端项目。

复制代码
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/json;

    sendfile        on;
    
    keepalive_timeout  65;

    server {
        listen       18080;
        # 指定前端项目所在的位置
        location / {
            root /usr/share/nginx/html/hmall-portal;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        location /api {
            rewrite /api/(.*)  /$1 break;
            proxy_pass http://hm:8080;
        }
    }
    server {
        listen       18081;
        # 指定前端项目所在的位置
        location / {
            root /usr/share/nginx/html/hmall-admin;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        location /api {
            rewrite /api/(.*)  /$1 break;
            proxy_pass http://hm:8080;
        }
    }
}

1。上面是nginx的配置文件,hm是网络的名称。 /usr/share/nginx/html 是nginx容器内部文件的地址。

2.上传文件到服务器,并且启动的时候,做数据卷映射

3.启动命令

复制代码
docker run -d \
 --name nginx \
-p 18080:18080 \
-p 18081:18081 \
-v  /root/nginx/html:/usr/share/nginx/html \
-v /root/nginx/nginx.conf:/etc/nginx/nginx.conf \
--network heima \
nginx

这里部署了两个前端项目,所以进行两个端口映射18080和18081

然后配置文件和前端文件都需要数据卷映射。

相关推荐
June bug17 小时前
【Vue】EACCES: permission denied 错误
前端·javascript·vue.js
陈随易17 小时前
PostgreSQL v18发布,新增AIO uuidv7 OAuth等功能
前端·后端·程序员
一只小阿乐17 小时前
react 中的组件性能优化
前端·javascript·react.js·react组件性能优化
柯南二号17 小时前
【大前端】【iOS】iOS 真实项目可落地目录结构方案
前端·ios
隔壁阿布都17 小时前
Docker 安装 Redis
redis·docker·容器
肉清17 小时前
linux自用命令
linux·服务器·前端
weibkreuz17 小时前
初始React@1
前端·react.js·前端框架
程序员老赵17 小时前
Apache IoTDB Docker 容器化部署指南:从入门到生产环境实践
docker·apache
Coder_Boy_17 小时前
前端和后端软件系统联调经典问题汇总
java·前端·驱动开发·微服务·状态模式
小皮虾17 小时前
别再封装 Axios 了!用 RPC 像调用本地函数一样写接口(支持 Vue/React/Node)
前端·rpc·全栈