Nginx 打包上线 nginx.conf文件配置

-風过无痕

已于 2023-10-10 22:25:06 修改

阅读量1.5k

点赞数 1

分类专栏： # Nginx使用文章标签： nginx 前端 webpack

于 2022-12-03 17:33:49 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53579656/article/details/128164079

版权

Nginx使用专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何使用Nginx部署项目到服务器，并解析了nginx.conf配置文件的关键设置，包括域名访问、端口映射、HTTPS证书及跨域处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

打包上线其实就是，我们有一个服务器绑定了域名，然后在通过Nginx部署代码，这样就可以域名访问项目。
在打包上线之前我们应该知道，开发常见的三种环境，本地环境，生产环境，测试环境。
参考文章
参考文章

Nginx

Nginx官网下载

Nginx中文网

Nginx配置中文参考手册

实际应用

1.我们现在实际情况是一个服务器绑定域名，只放一个项目的情况下。通过Nginx部署，域名进行访问项目。

2.我们进行项目生产环境打包，在打包之后我们可以理解为Nginx的nginx.conf文件就相当于了我们本地开发环境的vue.config.js文件。这样我们可以反向理解在Nginx能实现的，我们也可以通过webpack在本地的vue.config.js文件实现，比如为了一些特殊的便捷开发，摄像头和自动定位，需要把本地htttp改成https

3.配置nginx.conf文件，主要是打包之后dist文件位置指向，端口配置，https证书配置，跨域配置。

4.后端接口运行起来之后，服务器域名服务配置好了之后，启动Nginx。这样就可以在浏览器访问项目了。

生产环境打包

// 生产环境打包
npm run build:prod

nginx.conf文件在nginx-1.18.0/conf/nginx.conf

可以直接复制只适用于服务器部署一个项目没有配置https

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        #侦听80端口
        listen       80;
        #定义使用 localhost 访问
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        #访问这个时 相关配置
        location / {
            #定义服务器的默认网站根目录位置
            root   html/dist;
            #访问文件 不用改
            index  index.html index.htm;
            #指向这个默认根目录 指向文职 解决页面刷新404问题
            try_files $uri $uri/ /index.html; 
        }
        # 跨域配置
        location /api/ {
            proxy_pass http://localhost:8080;
            proxy_set_header Host $HOST;
            rewrite "^/api/(.*)" /$1 break;
        }

        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        
    }

}