nginx部署vue项目

1. 前言

此文档主要介绍如何使用nginx部署vue等前端项目，并配置SSL证书部署的前提下是服务器已经安装nginx，前端项目已打包成静态文件

2. 部署过程

2.1 申请SSL证书

向服务商（阿里云）申请SSL证书，并且下载nginx版本的key和密匙，放置于nginx的安装目录之下

2.2 修改nginx配置文件

修改nginx的配置文件nginx.cnf，修改的内容如下

user www-data;
worker_processes 4;
pid /run/nginx.pid;

events {
	worker_connections 768;
	# multi_accept on;
}

http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 65;
	types_hash_max_size 2048;
	# server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	##
	# Gzip Settings
	##

	gzip on;
	gzip_disable "msie6";

	##
	# Virtual Host Configs
	##

    #设定虚拟主机配置
  server {
        #侦听443端口https
        listen    443;
        #定义使用 www.nginx.cn访问
        server_name  www.nginx.cn;

      # SSL证书配置
      ssl on;
      # 证书路径
      ssl_certificate      /etc/nginx/ssl/www.nginx.cn.pem;
      ssl_certificate_key  /etc/nginx/ssl/www.nginx.cn.key;

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

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

        # vue打包后静态文件存储路径
        root /home/wwwroot/www.nginx.cn/;

        #默认请求
        location / {
        		# 除去www.nginx.cn/路径的其它路径访问路径例如www.nginx.cn/user
						try_files <span class="katex--inline"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>u</mi><mi>r</mi><mi>i</mi></mrow><annotation encoding="application/x-tex">uri </annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6595em;"><span class="mord mathnormal">u</span><span class="mord mathnormal" style="margin-right:0.02778em;">r</span><span class="mord mathnormal">i</span></span></span></span></span>uri/ /index.html last;
            #定义首页索引文件的名称
            index index.html index.htm;   

        }
        # 接口请求转发 www.nginx.cn/api/后面的请求，转发到本地8080端口
        location ^~ /api/ {
            proxy_pass  http://127.0.0.1:8080;
        }
        # 定义错误提示页面
        error_page   500 502 503 504 /50x.html;
        location = /50x.html {
        }

        #静态文件，nginx自己处理
        location ~ ^/(images|javascript|js|css|flash|media|static)/ {

            #过期30天，静态文件不怎么更新，过期可以设大一点，
            #如果频繁更新，则可以设置得小一点。
            expires 30d;
        }
    }
	
	# http转https http80端口重定向至443端口
	server {
		listen 80;
		server_name m.1gene.com.cn;
		return      301 https://<span class="katex--inline"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>s</mi><mi>e</mi><mi>r</mi><mi>v</mi><mi>e</mi><msub><mi>r</mi><mi>n</mi></msub><mi>a</mi><mi>m</mi><mi>e</mi></mrow><annotation encoding="application/x-tex">server_name</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.5806em;vertical-align:-0.15em;"><span class="mord mathnormal" style="margin-right:0.02778em;">ser</span><span class="mord mathnormal" style="margin-right:0.03588em;">v</span><span class="mord mathnormal">e</span><span class="mord"><span class="mord mathnormal" style="margin-right:0.02778em;">r</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.1514em;"><span style="top:-2.55em;margin-left:-0.0278em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">n</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span><span class="mord mathnormal">am</span><span class="mord mathnormal">e</span></span></span></span></span>request_uri;
	}
}
</span></span></span></span>

2.3 重启nginx

service nginx restart