共计 3101 个字符，预计需要花费 8 分钟才能阅读完成。
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 只能写一个。
转发说明：
upstream 中的 server 监听的是服务器中启动的端口
当请求匹配上 server server_name 时 就会 进行匹配 location
在匹配成功 location 中的反向代理 proxy_pass 为 http:// + upstream 时
就会代理到 upstream 中的 server 监听的端口
检验一下
nginx 配置 SSL（https）
平常我们部署的时候，会发现浏览器的地址栏会有 (http://) 然后会有不安全的字样, 哼～！作为强迫症可是不想有这种字样，那么我们就来配置 https 安全吧
首先要先去购买 ssl 证书
当然还是要买免费的啦，个人需求，嘿嘿～
当购买完成以后，需要一定时间来等待证书签发，如果签发完成了以后，就来下载证书信息
因为我们转发是使用 nginx 来写的 所以应该使用 nginx 版本证书类型，下载完成后，需要把这些证书放在服务器中，当然证书的位置还是要放在 nginx.conf 所在的文件夹中
然后我们就开始 修改 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 自动化部署，省时又省力～，哈哈哈
