服务器从安装到部署全过程（二）

OK! 上一篇文章中大概尝试安装mysql、nginx、nodeJs、pm2 的一些过程以及在配置中出现的问题还有一些解决方式，那么在本次过程尝试中，将进一步进行服务器的基础配置，以及前端应用 node、pm2 部署

nginx

通过上次 nginx 已经安装至服务器中了，在这里面主要介绍一下部署相关所须要的配置，例如：监听端口、服务转发、静态资源、ssl 证书（https） 的配置

静态资源

在咱们没有后端服务的时候，只是想要写一些demo或者静态页面时，就可使用nginx做为静态资源服务器，能够被外网访问到，如下就是 具体的配置了，能够在nginx.conf 中创建二级域名，来搭建。

http {
	server {
		listen			80; # 监听的端口号
		server_name		static.scrscript.com # 转发的名称 也就是二级域名 不过二级域名虽然不须要从新备案可是 域名解析要有 static 关键字
		location /  {
			root		/cloud/static
		}
	}
}
复制代码

说明： 监听的 80 端口 而后 转发名称为 server_name 所对应的静态路径为 /cloud/static/ 其实就是 location root + localtioon name 这样就nginx就能够读取到 /cloud/static/ 目录下的文件了，server_name 设置二级域名时前缀后面最好跟的是本身的域名 自定义前缀+本身的域名，而域名解析最好要加上*得以匹配其余二级域名来访问

服务器静态的资源的转发 其实有两种写法:

location / {
	root /cloud/static # 这种写法 主要是 location root + location name
	# alias /cloud/static # 这种写法就睡 就是直接location alias 的路径信息了
}
复制代码

检验一下

服务转发

当咱们有后端服务时， 咱们那么咱们能够经过nginx的转发配置，来让咱们的网站能够被访问到

http {
	# 使用upstream（上游）模块
	# server 监听的端口
	# weight 权重
	# max_fails 最大容许失败数
	# fail_timeout max_fails次失败后，暂停时间
	upstream blog {
		#ip_hash;
		server localhost:9931 weight=2 max_fails=2 fail_timeout=3s;
	}
	
	server {
		listen			80 default;
		server_name		_;
		location / {
			proxy_pass: http://blog;
		}
	}
}
复制代码

说明：在请求的过程当中 若是请求的地址 与 server_name 匹配上那么就会采用这个配置 若是都不匹配 那么就会先行查看 listen 监听的域名 后有default 配置项的，注意 default 只能写一个。

转发说明：

1. upstream 中的 server 监听的是服务器中启动的端口
2. 当请求匹配上 server server_name 时 就会 进行匹配 location
3. 在匹配成功 location 中的反向代理proxy_pass 为 http:// + upstream 时
4. 就会代理到 upstream 中的 server 监听的端口

检验一下

nginx 配置SSL（https）

日常咱们部署的时候，会发现浏览器的地址栏会有(http://) 而后会有不安全的字样, 哼～！做为强迫症但是不想有这种字样，那么咱们就来配置https 安全吧

首先要先去购买 ssl 证书

固然仍是要买免费的啦，我的需求，嘿嘿～

1. 当购买完成之后，须要必定时间来等待证书签发，若是签发完成了之后，就来下载证书信息
2. 由于咱们转发是使用 nginx 来写的 因此应该使用 nginx 版本证书类型，下载完成后，须要把这些证书放在服务器中，固然证书的位置仍是要放在 nginx.conf 所在的文件夹中
3. 而后咱们就开始 修改 nginx.conf 文件吧

http {
	# 使用upstream（上游）模块
	# server 监听的端口
	# weight 权重
	# max_fails 最大容许失败数
	# fail_timeout max_fails次失败后，暂停时间
	upstream blog {
		#ip_hash;
		server localhost:9931 weight=2 max_fails=2 fail_timeout=3s;
	}
	
	server {
	    listen 443 ssl; # 必定要开启 443 服务器端口
	    server_name xxx.com;  # 须要ssl的域名
	    ssl on;
	    # root /cloud/node/;
	    # index index.html index.htm;
	    ssl_certificate  cert/a.pem; # ssl 证书在服务器中相对于 nginx.conf 的路径
	    ssl_certificate_key cert/a.key; # ssl 证书在服务器中相对于 nginx.conf 的路径
	    ssl_session_timeout 5m;
	    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
	    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
	    ssl_prefer_server_ciphers on;
	    location / {
			proxy_pass http://blog;
	    }
	}
	
	server {
		listen			80 default;
		server_name		_;
		rewrite ^(.*)$  https://$host$1 permanent; # 重定向到 https
		location / {
			proxy_pass: http://blog;
		}
	}
}
复制代码

注意必定要 重启 nginx nginx -s reload

哈哈哈哈 小锁 还有 https

前端部署

在这里 着重来讲一下 vue 项目的部署过程，还有 html 文件怎么在浏览器中访问到

html 静态资源访问

其实在上面 nginx 中，咱们配置了 nginx 静态资源服务器，其实静态资源的部署 很是简单 就是直接把 html 文件 放在静态资源所配置的目录就能够了， 这样咱们平时写的项目 或者 demo 均可放在这个目录下，来实现浏览

vue 单页应用部署

blog 的 后端是使用的是 node-express 脚手架，在 express 脚手架中 express.static 定义的是 静态资源所在的位置，咱们能够直接放在 项目的根目录下 而后启动项目 就能够直接访问到了。
静态资源访问路径： app.use('' ,express.static(path.join(__dirname, 'dist')));
请看个人项目结构

上传至 服务器 后 咱们能够用 pm2 来启动 达到负载均衡, 守护进程的效果 pm2 start xxx

检验一下

vue nuxt 部署

nuxt 是 vue 的 服务端渲染，有利于 seo 的服务端渲染应用框架，做为前台应用 固然是想要本身写的文章 能让更多人搜索到，nuxt 固然是个人不二之选，哈哈哈哈，OK 咱们来讲下 nuxt 如何来部署吧

首先 咱们应该先给 nuxt 应用执行打包命令 npm run build 打包完成后，咱们能够把有用的文件事先剔除出来

下面请看个人文件目录

先上传至服务器而后 npm install or cnpm i

而后进入到相应的 应用文件目录 执行 pm2 start npm --name "进程名称" -- run start

部署完毕 blog nuxt

连接

配置nginx静态服务器

nginx server 匹配顺序

nuxt 部署参考

结语

基础的配置 基本上已经走完一遍了，其实若是是 部署频率低的状况下 那么这样一遍遍部署 实际上是费不了多大事，可是呢，在初期的时候总有很多东西要改，那这样一遍遍部署 不只繁琐 并且还浪费咱们 宝贵的时间那么，下次我将配置 docker and jenkins 自动化部署，省时又省力～，哈哈哈