vue-ssr 远程服务器部署

    xiaoxiao2025-04-05  37

                                    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

     

     

     

     

    未完待续......

     

     

    最新回复(0)