美文网首页
前端项目上线_nginx

前端项目上线_nginx

作者: 葛明路 | 来源:发表于2020-04-14 11:30 被阅读0次

    准备:

    使用npm run build将Vue项目打包,得到一个dist文件夹,并上传到服务器。
    在服务器上安装nginx
    apt-get install nginx
    配置/etc/nginx/nginx.conf文件

    配置:

    在http{}里添加server,server是虚拟主机配置,一个站点就是一个server

       server {
            listen 80 ssl;     #端口
            server_name ele.geminglu.cn;     #域名或IP地址
                location / {
                        root   /home/ubuntu/elebackstage/dist;     #3.dist文件的位置
                        try_files $uri $uri/ /index.html;     #4.重定向,如果路由用的是history 没事就需要配置
                }
                location /api {  #当请求跨域时配置端口转发,如果项目不是使用反向代理的话就不需要配置。
                        proxy_pass      https://geminglu.cn:3003; #5.转发地址
                }
        }
    

    如果使用HTTPS就需要参考一下配置:

        server {
            listen 443 ssl;     #端口
            server_name ele.geminglu.cn;     #域名
            #证书路径
            ssl_certificate      /home/ubuntu/SSL/Nginx/1_www.geminglu.cn_bundle.crt;   
            ssl_certificate_key  /home/ubuntu/SSL/Nginx/2_www.geminglu.cn.key;
            ssl_session_timeout 5m;
            #请按照以下协议配置
            ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
            #请按照以下套件配置,配置加密套件,写法遵循 openssl 标准。
            ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
            ssl_prefer_server_ciphers on;
                location / {
                        root   /home/ubuntu/elebackstage/dist;     #dist文件的位置
                        try_files $uri $uri/ /index.html;     #重定向,如果路由用的是history 没事就需要配置
                }
                location /api {  #当请求跨域时配置端口转发
                        proxy_pass      https://geminglu.cn:3003; #转发地址
                }
        }
        server {
            listen 80;
            #填写服务器IP
            server_name 111.229.110.113; 
            #把http的域名请求转成https
            return 301 https://$host$request_uri; 
        }
    

    启动:

    在开启服务之前,可以使用 nginx -t 测试一下配置文件的语法是否正确
    nginx 开启服务
    nginx -s stop 停止服务

    相关文章

      网友评论

          本文标题:前端项目上线_nginx

          本文链接:https://www.haomeiwen.com/subject/foszmhtx.html