[图片] nginx 部署 vue 项目 1. 前言 此文档主要介绍如何使用nginx部署vue等前端项目,并配置 SSL 证书部署的前提下是服务器已经安装nginx,前端项目已打包成静态文件 2. 部署过程 2.1 申请 SSL 证书 向服务商(阿里云)申请 SSL 证书,并且下载nginx版本的 key 和密匙,放 ..

nginx 部署 vue 项目

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 $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
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    220 引用 • 433 回帖 • 622 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    656 引用 • 836 回帖 • 671 关注
回帖
请输入回帖内容...