nginx打包成exe nginx打包和部署

转载

mob64ca1416f1ef 2024-03-17 17:01:15

文章标签 nginx打包成exe nginx 前端 webpack 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;
        }
        
    }

}