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

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;
        }
    }
}

前端部署

在这里 着重来说一下 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 自动化部署，省时又省力～，哈哈哈