Nginx反向代理实现部署dist文件

Linux服务器安装nginx可以参考文章–Linux服务器安装Nginx
Nginx常用命令可以参考文章–Nginx 启动、关闭、重启、检测等常用命令

1.创建文件存放dist文件

我的nginx安装目录为:/usr/local/nginx/nginx-1.21.6
注意:每个人的安装目录可能不一样
第一步进入自己nginx的安装目录
第二步新建存放dist文件存放的文件夹
第三步将dist文件上传到新建的文件夹中

//进入nginx安装目录
cd /usr/local/nginx/nginx-1.21.6

//创建web_app文件存在dist文件
mkdir web_app

//上传dist可以通过ftp获取其他ssh远程连接软件实现,这里就不细讲

2.修改配置

nginx默认配置文件在安装目录下的 /conf/nginx.conf
nginx所有配置可以参考文章–Nginx配置文件详解
直接参考下面配置代码

//配置nginx的进程数
worker_processes  1;



events {
	//最大连接数
	worker_connections  1024; 
}


http {
	//文件拓展名与文件类型的对应映射表
    include  mime.types;
    //配置nginx响应前端请求默认的MIME类型,默认default_type text/plain
    default_type  application/octet-stream;

	//开启高效文件传输模式,sendfile指令指定nginx是否调用sendfile函数来输出文件,
    //对于普通应用设为 on,如果用来进行下载等应用磁盘IO重负载应用,可设置为off,
    //以平衡磁盘与网络I/O处理速度,降低系统的负载。注意:如果图片显示不正常把这个改成off。
	sendfile on;
	
	//长连接模式,默认开启,单位秒
	keepalive_timeout  65;

	server {
        listen	80;
        server_name  localhost;

        location / {
        	//dist文件路径
            root   /web_app/dist;
            index  index.html index.htm;
        }

        error_page	500 502 503 504  /50x.html;
        location = /50x.html {
        	//错误页面路径
            root	/web_app/dist;
        }
	
}

3.重启Nginx服务

参考文章–Nginx 启动、关闭、重启、检测等常用命令

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,以下是一个简单的 nginx 本地部署 Vue 应用并反向代理配置的示例: 1. 打包 Vue 应用 首先需要在本地打包 Vue 应用,运行以下命令: ``` npm run build ``` 打包完成后,会在项目根目录下生成一个 `dist` 目录,其中包含了所有打包后的静态文件。 2. 配置 nginxnginx 的配置目录中,创建一个新的配置文件,比如 `myapp.conf`,并将以下内容复制进去: ``` server { listen 80; server_name myapp.com; root /path/to/dist; # 将 "/path/to/dist" 改为你实际的 dist 目录路径 index index.html; location / { try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://localhost:8080/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; } } ``` 其中,`myapp.com` 是你的域名,`/path/to/dist` 是你的 Vue 应用的打包后的静态文件所在的目录路径,`/api/` 是你要反向代理的后端 API 的前缀,`localhost:8080` 是你要代理的本地服务地址。 在上面的配置中,`location /` 部分将所有请求都指向 Vue 应用的入口文件 `index.html`,`location /api/` 部分将以 `/api/` 开头的请求代理到本地服务上,并设置了一些请求头,包括 `Host`、`X-Real-IP` 和 `X-Forwarded-For`。 3. 启动 nginx 将 `myapp.conf` 配置文件放置在 nginx 的配置目录中,通常位于 `/etc/nginx/conf.d/` 目录下。最后,重启 nginx 服务以应用新的配置。 ``` sudo service nginx restart ``` 现在,你可以通过访问 `http://myapp.com` 来访问 Vue 应用,并通过访问 `http://myapp.com/api/` 来访问本地服务的 API 接口了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hippoDocker

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值