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

摘要：上一篇文章中大概尝试安装的一些过程以及在配置中出现的问题还有一些解决方式，那么在本次过程尝试中，将进一步进行服务器的基础配置，以及前端应用部署经过上次已经安装至服务器中了，在这里面主要介绍一下部署相关所需要的配置，例如监听端口服务转发静态资

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

经过上次 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 监听的端口

检验一下

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

当然还是要买免费的啦，个人需求，嘿嘿～

当购买完成以后，需要一定时间来等待证书签发，如果签发完成了以后，就来下载证书信息

因为我们转发是使用 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 文件怎么在浏览器中访问到

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

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

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

检验一下

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 自动化部署，省时又省力～，哈哈哈