前端审查_Nginx

项目如何部署上线

前端如何构建生产环境代码

vueCli/vite/cra/umi等都是运行 build脚本

npm run build

build如何定义 打包生产环境代码配置

  • vueCli

在配置文件 vue.config.js中

{
    publicPath: '/', //默认是/ 绝对路径 ./相对路径  上线后 静态资源 404
    outputDir: 'dist', // 定义打包生产环境代码 目录名 默认是 dist
    productionSourceMap: false // 去除生产环境 map文件,加速生产环境代码构建
}

服务器如何配置 Nginx举例

注意:

​ nginx 部署目录 不能存在 中文 配置 也不行 注释也不行

​ nginx 要在cmd在运行, nginx目录下打开cmd运行指令

nginx常用指令

start nginx  // 启动nginx
nginx -s stop // 停止nginx所有服务
nginx -s reload // 重新加载 nginx 用于 修改了配置后 重启服务

一下是 nginx常用配置 注释不能写中文(以下为了方便学习注释写的中文)

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; // 开启 gzip压缩 提高 网页打开速度
    
	// 服务1
    server {
        listen       80; // 端口号
        server_name  localhost; // 域名 生产环境 买的域名, 备案(dns解析)
        

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		// 配置当前服务的 监听的 目录(静态资源根目录)
        location / {
            root   html; // 配置根目录是 nginx目录下 html目录可以是相对路径 或者绝对路径
            index  index.html index.htm;
        }
		// nginx 404页面,只需要写一个 404.html放到 html目录即可
        error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        //  服务器报错 重定向错误页面 根目录下的 50x.html 重新定义 结构和样式
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        // nginx 服务器反向代理
        /*
        	开发项目如何解决跨域问题?
        	1 开发环境下 脚手架下 配置文件 配置反向代理
        	2 上线如何还是跨域 利用nginx做反向代理
        */
        location ~ ^/api {
            proxy_pass   代理的源;
        }

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

  • 7
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

苦逼的猿宝

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

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

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

打赏作者

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

抵扣说明:

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

余额充值