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 $uri $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://$server_name$request_uri;
	}
}

2.3 重啟nginx

service nginx restart