vue-ssr 远程服务器部署

                                vue-ssr 远程服务器部署

 

项目简介

       这里部署的项为 vue（全家桶） + koa + pm2 + nginx （ssr） 服务端渲染模式。

 部署环境为 SentOS7。 如下讲解匀基于SentOS7. 

 

一. 认识SSH

Secure Shell（安全外壳协议，简称SSH）是一种加密的网络传输协议，可在不安全的网络中为网络服务提供安全的传输环境。SSH通过在网络中创建安全隧道来实现SSH客户端与服务器之间的连接。虽然任何网络服务都可以通过SSH实现安全传输，SSH最常见的用途是远程登录系统，人们通常利用SSH来传输命令行界面和远程执行命令。使用频率最高的场合类Unix系统，但是Windows操作系统也能有限度地使用SSH。2015年，微软宣布将在未来的操作系统中提供原生SSH协议支持。

SSH协议族可以用来进行远程控制， 或在计算机之间传送文件。而实现此功能的传统方式，如telnet(终端仿真协议)、 rcp ftp、 rlogin、rsh都是极为不安全的，并且会使用明文传送密码。OpenSSH提供了服务端后台程序和客户端工具，用来加密远程控制和文件传输过程中的数据，并由此来代替原来的类似服务。
 

 

二. (window) cmd 远程连接服务器

   这里我申请了阿里云服务器 Linux（CentOS）， 本文章中相关部署匀给予linux。

    w10 自带ssh. 如果系统找不到ssh 命令可自行安装（https://www.mls-software.com/opensshd.html）。

下载好后输入： ssh root@服务器公网IP     （root: (一般为连接服务的实例名称)）

回车后，输入登录名，密码。然后点回车进入了我们的服务器。

 

 

三. 使用pm2 部署代码

     PM2是node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单。

    1.  npm install pm2 -g

         在linux下执行上述目录后，控制台pm2 list 提示： -bash: pm2: command not found

         解决方法：

                1. 1 记住全局安装后的pm2 路径： 

                 

                 1.2 找到全局环境PATH路径

                    输入命令： echo $PATH  

                    回车后...  ：    /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bi 

                                     （你可以选择任何一个以：隔开的路径做为系统环境路径，我通常会选/usr/local/bin）

                 1.3 设置全局变量

                    输入命令：   ln -s /root/node-v6.9.5-linux-x64/lib/node_modules/pm2/bin/pm2 /usr/local/bin/   

                                         (留意 pm2 后面有个空格。 不同电脑路径及相关版本可能不同这里做参考)

                    回车后... :    如果提示：ln: failed to create symbolic link ‘/usr/local/bin/pm2’: File exists

                                        则使用：mv /usr/local/bin/pm2 /tmp/ 删除就好  然后再次执行设置全局变量命令就OK了。

                   (成功后可通过数据 pm2 list 命令查看已运行服务列表是否正常)

                    

 

         2. pm2 一些常用命令

             2.1 pm2 start pm2.yml --env production  // 启动服务

                  (

                      注：启动时需要先定位到启动文件所在目录。  <这里为：pm2.yml文件所在目录>；

                             如：root/projects/devFiles;     默认阿里云控制台进入的是 ~:  表示的就是当前在 root目录下，

                                     通过  cd projects/devFiles/ 就可以定位到你的项目根目录下。

                  )

             2.2 pm2 restart/stop vue-todo （pm2中配置的名称） //  重启/停止

             2.3 pm2 list  //查看所有已启动服务

             2.4 pm2 log vue-todo  // 查看日志

             2.5 pm2 describe app_name|app_id 查看某一个进程的信息：

      $ npm install pm2 -g     # 命令行安装 pm2 
      $ pm2 start app.js -i 4 #后台运行pm2，启动4个app.js 
                                # 也可以把'max' 参数传递给 start
                                # 正确的进程数目依赖于Cpu的核心数目
     $ pm2 start app.js --name my-api # 命名进程
     $ pm2 list               # 显示所有进程状态
     $ pm2 monit              # 监视所有进程
     $ pm2 logs               #  显示所有进程日志
     $ pm2 stop all           # 停止所有进程
     $ pm2 restart all        # 重启所有进程
     $ pm2 reload all         # 0秒停机重载进程 (用于 NETWORKED 进程)
     $ pm2 stop 0             # 停止指定的进程
     $ pm2 restart 0          # 重启指定的进程
     $ pm2 startup            # 产生 init 脚本 保持进程活着
     $ pm2 web                # 运行健壮的 computer API endpoint (http://localhost:9615)
     $ pm2 delete 0           # 杀死指定的进程
     $ pm2 delete all         # 杀死全部进程
   

     

 

  3. pm2 设置开机自动启动

                 1）启动项目： pm2 start pm2.yml --env production ；

                 2）保存当前进程状态： pm2 save;

                 3）生成开机自启动服务： pm2 startup;

                 4)  启用开机自启： systemctl enable pm2-root  

           

     pm2 启动过程遇到的问题：

         (1)  提示服务端ES6 (async ,await )语法错误（导致启动pm2 始终失败）:

               解决办法： 在server.js下面创建了一个“babel-koa-pm2-es6.js” 文件。

                                内容如下：

/*
  该文件主要用来对koa es6语法的支持
*/
require('babel-register')
require('./server.js')

    通过在项目package.json -D 中安装babel-register ，并在文件加载前引入方式来解决koa,

    对es6支持的loader问题。

 

 

三.  Linux (CentOS7 )项目部署过程常用命令

      1. cd  ~/home 进入 '/ home' 目录'   （~表根目录 root）

      2. cd .. 返回上一级目录

      3. cd .. 返回上一级目录

      4. ls 查看目录中的文件

          ls -F 查看目录中的文件 
          ls -l 显示文件和目录的详细资料 
          ls -a 显示隐藏文件 

     find 命令来查找安装应用目录： find -name  appname/nginx

    netstat -tunlp: 查看当前使用的进程及端口号情况

附： vim底行模式下常用指令：

：w 保存

：q 退出

：! 强制执行

：ls 列出打开的所有文件

：n切换到后一个文件

：N 或：prev 切换到前一个文件

：数字 光标快速定位到num行

/xxx 光标向后搜索顶一个xxx字符串

？xxx光标向前搜索到第一个xxx字符串

vim中命令模式写的常用指令

h j k l 光标左下上右移动

ctrl + f 向下翻页

ctrl + b 向上翻页

ctrl + d 向下翻半页

ctrl + u 向上翻半页

dd 删除当前行

yy复制当前行

p粘贴到当前行的下一行

P站忒在当前行的上一行

o在当前行的下一行新开一行并切换到输入模式

按键	执行结果
:wq	保存并退出当前文件
:w	保存当前文件并留在编辑器中
:w！	若文本为只读模式，强制保存
:q	退出当前文件（仅在没有未保存更改的情况下）
:q!	退出当前文件，忽略任何未保存的修改

    5. 常用自定义服务命令：

        1）查看服务列表状态:  systemctl list-units --type=service

        2）列出所有已经安装的 服务 及 状态： systemctl   list-unit-files (简洁)

        3）可以列出正在运行的服务状态： systemctl  (详细)

        4）以树形列出正在运行的进程，它可以递归显示控制组内容： systemd-cgls   

        5） 启动一个服务： systemctl start postfix.service

        6） 关闭一个服务： systemctl stop postfix.service

        7） 重启一个服务： systemctl restart postfix.service

        8） 显示一个服务状态： systemctl status postfix.service

        9）开机时启用一个服务： systemctl enable postfix.service

       10） 开机时禁用一个服务： systemctl disable postfix.service

       11） 查看服务是否开机启动：systemctl is-enabled postfix.service

       12） 查看已启动的服务列表： systemctl list-unit-files | grep enabled

       13）查看启动失败的服务列表： systemctl --failed

 

四.  nginx 反向代理

       我们通过域名来请求服务器时， 默认只能使用指定80端口。

        客户请求-> nginx 流程：

      1. nginx 安装

          安装命令：  yum install nginx

           安装后所在目录为： cd /etc/nginx/   (该目录下通过 ls 命令可以查看该目录下的文件列表)

           我们可在 cd  conf.d/  目录下创建一个 vim todo.conf 文件（Vim 是 Linux 系统上的最著名的文本/代码编辑器）。

           注：这里发现在conf.d 下配置的编写配置文件， nginx中的核心模块加载不进来，导致报错。

                  目前nginx 反向代理通过默认安装生成目录(/etc/nginx) 下的， nginx.conf 文件进行修改后，成功通过域名访问。

                  （只修改了proxy_pass配置，其它临时默认不需要修改）

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /root/projects/vueFramework; #/usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / { // czz only update proxy_pass config content
          proxy_pass http://127.0.0.1:7788;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

            todo.conf 文件内容：

upstream todo {
  server 127.0.0.1: 7788;
  keepalive 64; # 指定能够长存的 http 请求连接数
}
server{
  listen 80;
  server_name xxxxx.com.top; # 访问这个服务的域名/ip （可以带端口； 只有在这里匹配到了，才会代理到 上面配置的server 地址）
  location / {
    proxy_set_header X-Real-IP $remote_addr; # 转发的时候会带的一些http 头
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header HOST $http_host;
    proxy_set_header X-Nginx-Proxy true;
    proxy_set_header Connection "";
    proxy_pass http://todo; # 代理到哪个地方；  这里要和上面upstream后的应用名一致，可自定义
  }
  location ~ \.(txt)$ {
    root /var/www/jnode/;
  }
}

  启动nginx：

     执行如下命令：

     service nginx start/reload  （执行完后就可以访问文件了）

    nginx -s stop :快速停止nginx

   1.1 启动： 进入nginx安装目录/sbin/下执行
            nginx  或者  nginx -c 特定位置的nginx.conf (一般默认是 ./nginx -t -c .url/local/nginx/nginx.conf)
  1.2 重启：nginx -s reload 平滑的重启。配置重载。
           nginx工作中，包括一个master进程，多个worker进程。worker进程负责具体的http等相关工作，master进程主要是进行控制等控制。 

   真正的启动命令是：  nginx 或者 nginx -c 指定目录的配置文件 nginx.conf。  查看进程存在即表明启动成功，之后再调用reload和reopen就不会报错了。

 1.3 查看状态： systemctl status nginx；

 1.4 查看集成及端口信息： netstat -tnlp 

 1.5 查看nginx配置是否正确 ： nginx -t 

  1.6 查看nginx 的进程号： ps -ef |grep nginx

  2. nginx 停止/关闭/卸载

  2.1 stop 快速停止nginx ； 调用 nginx -s quit 完整有序的停止nginx; kill -9 pid
  2.2 卸载  1)yum remove nginx；  2) which nginx ;

  2.3 nginx -s  reload 命令加载修改后的配置文件,命令下达后发生如下事件
  2.3.1 . Nginx的master进程检查配置文件的正确性，若是错误则返回错误信息，nginx继续采用原配置文件进行工作（因为worker未受到影响）
2.3.2. Nginx启动新的worker进程，采用新的配置文件
2.3.3. Nginx将新的请求分配新的worker进程
2.3.4. Nginx等待以前的worker进程的全部请求已经都返回后，关闭相关worker进程
2.3.55. 重复上面过程，知道全部旧的worker进程都被关闭掉。所以，重启之后，master的进程号不变，worker的进程号会改变。
日志分割：nginx -s reopen  重新打开日志文件。

reopen是在nginx启动的情况给做分割日志用的，  reload也是在nginx启动的情况下做平滑重启的，他们都依赖于nginx进程存在的情况下。 并不是字面上启动或打开的意思。
   

   3. 配置nginx开机启动

      1)  切换到 /lib/systemd/system/, 创建nginx.service 文件（vim nginx.service . 我的目录下默认已自动生成了一个。

# cd /lib/systemd/system/
# vim nginx.service

        文件内容如下（如果目录下没有直接创建文件，粘贴下方内容即可）：

[Unit]
Description=The nginx HTTP and reverse proxy server
After=network.target remote-fs.target nss-lookup.target

[Service]
Type=forking
PIDFile=/run/nginx.pid
# Nginx will fail to start if /run/nginx.pid already exists but has the wrong
# SELinux context. This might happen when running `nginx -t` from the cmdline.
# https://bugzilla.redhat.com/show_bug.cgi?id=1268621
ExecStartPre=/usr/bin/rm -f /run/nginx.pid
ExecStartPre=/usr/sbin/nginx -t
ExecStart=/usr/sbin/nginx
ExecReload=/bin/kill -s HUP $MAINPID
KillSignal=SIGQUIT
TimeoutStopSec=5
KillMode=process
PrivateTmp=true

[Install]
WantedBy=multi-user.target

 2)  退出并保存，执行systemctl enable nginx.service 使nginx开机启动

# systemctl enable nginx.service

 3) 相关服务操作命令：

     启动nginx： systemctl start nginx.service    

     结束nginx： systemctl stop nginx.service    

     重启nginx： systemctl restart nginx.service    

 

五. git 安装

     Centos下使用：yum install -y git

     Ubuntu/Debian下使用 ： apt-get install  -y git

 

 

 

 

未完待续......