nginx配置多vue项目

1. 找到linux docker安装好的nginx目录文件

进入nginx内  把打包好的vue项目放在html文件下

如上  三个文件夹下对应着三个不同的vue项目

2. 配置default.conf的配置文件, 一个nginx配置文件可以多个项目进行代理

进入到conf  找到conf.d下面的default.conf 文件

编辑default.conf

在原有的配置下加上如下配置


server {
       listen      90;
       server_name  localhost; 

       location / {
           root   /usr/share/nginx/html/fine_prd;
           index  index.html index.htm;
           try_files $uri $uri/ /index.html;
           client_max_body_size 1024m;
           client_body_buffer_size 10m;
       }
}



server {
       listen      95;
       server_name  localhost; 

       location / {
           root   /usr/share/nginx/html/wisdom;
           index  index.html index.htm;
           try_files $uri $uri/ /index.html;
           client_max_body_size 1024m;
           client_body_buffer_size 10m;
       }
}

然后停止docker中的nginx   docker stop nginx

重新运行nginx镜像

docker run -p 4006:80 -p 4016:90 -p 4014:95 --name nginx \
-v /date/data/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /date/data/nginx/html:/usr/share/nginx/html \
-d nginx

然后访问对应的IP:端口号  就能看到线上的vue项目啦

如果需要修改配置文件,修改后重启下nginx即可

docker  restart  nginxId

  • 10
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 是一个流行的前端框架,常用于构建单页面应用。Nginx 是一个轻量级的 Web 服务器,可以用于反向代理、负载均衡、静态资源服务等。在 Vue.js 项目中使用 Nginx 可以提高应用性能和安全性。 以下是在 Vue.js 项目中使用 Nginx 的步骤: 1. 安装 Nginx,并配置 Nginx 的相关参数,比如监听的端口号、静态资源路径等。 2. 将 Vue.js 项目打包成静态资源文件,可以使用命令 `npm run build` 或者 `yarn build` 进行打包。打包后会生成一个 dist 目录,包含了所有的静态资源文件。 3. 将 dist 目录下的所有文件拷贝到 Nginx 的静态资源目录下,比如 `/usr/share/nginx/html` 目录。 4. 配置 Nginx 的反向代理,将请求转发到 Vue.js 应用的监听端口上。可以使用以下的配置: ``` server { listen 80; server_name your_domain.com; location / { proxy_pass http://localhost:3000; # 将请求转发到 Vue.js 应用的监听端口 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location /api/ { proxy_pass http://api.your_domain.com; # 将请求转发到后端 API 服务的地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 上面的配置将所有请求都转发到 Vue.js 应用的监听端口上,同时将 `/api/` 开头的请求转发到后端 API 服务的地址上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值