如何将自己的前后台项目部署到服务器上-六虎

服务器准备

服务器挑选看个人喜好，能够在腾讯云、阿里云、华为云等上购买轻量服务器。现在自己挑选的是腾讯云的轻量服务器。因而以下一切设置都是针对腾讯云服务器进行的。可是其它的服务器也大差不差，装备方法基本是一样的。

node、mongodb、nginx 紧缩包准备

node 装置包下载：v14.9.0。

mongodb 装置包下载：CentOS 7.0 x64-5.0.14 tgz 紧缩包。

nginx 装置包下载：nginx-1.22.1 pgp。

以上装置包的版本，官网可能会不存在，假如没有找到上述对应的版本，最好挑选与之附近的版本，避免呈现不兼容的情况。

装置 node、pm2、yarn

输入指令 cd /usr/local 进入到 local 文件夹中。进入到 local 文件夹中后，输入指令 mkdir node 创立一个 node 文件夹。之后 cd node 到 node 目录下，在 node 目录下输入指令 rz 将下载的 node 包上传到 /usr/local/node 文件夹中，紧接着在当时 node 目录下输入如下指令：

tar -vxf node-v14.9.0-linux-x64.tar.xz 指令将 node 进行解压。解压完结之后，cd node-v14.9.0-linux-x64/bin 到 node-v14.9.0-linux-x64 下的 bin 目录下，接着输入指令：
- ln -s /usr/local/node/node-v14.9.0-linux-x64/bin/node /usr/local/bin/node 设置 node 环境变量。
- ln -s /usr/local/node/node-v14.9.0-linux-x64/bin/npm /usr/local/bin/npm 设置 node 环境变量。
- npm i yarn -g 装置 yarn，同时输入：ln -s /usr/local/node/node-v14.9.0-linux-x64/bin/yarn /usr/local/bin/yarn 设置 node 环境变量。
- npm i pm2 -g 装置 pm2，同时输入：ln -s /usr/local/node/node-v14.9.0-linux-x64/bin/pm2 /usr/local/bin/pm2 设置 node 环境变量。

详细指令总结如下，顺次履行即可：

cd /usr/local
mkdir node
cd node
rz  #挑选node-v14.9.0-linux-x64.tar.xz
tar -vxf node-v14.9.0-linux-x64.tar.xz
cd node-v14.9.0-linux-x64/bin
ln -s /usr/local/node/node-v14.9.0-linux-x64/bin/node /usr/local/bin/node
ln -s /usr/local/node/node-v14.9.0-linux-x64/bin/npm /usr/local/bin/npm
npm i yarn -g
ln -s /usr/local/node/node-v14.9.0-linux-x64/bin/yarn /usr/local/bin/yarn
npm i pm2 -g
ln -s /usr/local/node/node-v14.9.0-linux-x64/bin/pm2 /usr/local/bin/pm2

装置及发动 mongodb

cd /usr/local 目录下，运用 mkdir mongodb 创立 mongodb 文件夹。

cd / 到根目录，运用指令 mkdir -p /data/db 创立 db 文件夹。再运用 mkdir -p /data/log 创立 log 文件夹，用于存储数据及日志。

cd /usr/local/mongodb 文件夹下，运用 rz 指令将下载好的紧缩包经过了 tar -vxf mongodb-linux-x86_64-rhel70-5.0.14.tgz 进行解压。

cd mongodb-linux-x86_64-rhel70-5.0.14/bin 目录，再运用 ./mongod --dbpath=/data --logpath=/data/log/mongod.log --fork 在后台发动 mongodb。

详细指令总结如下，顺次履行即可：

cd /usr/local
mkdir mongodb
cd /
mkdir -p /data/db
mkdir -p /data/log
cd /usr/local/mongodb
rz  #挑选下载好的 mongodb-linux-x86_64-rhel70-5.0.14.tgz 紧缩包
tar -vxf mongodb-linux-x86_64-rhel70-5.0.14.tgz
cd mongodb-linux-x86_64-rhel70-5.0.14/bin
./mongod --dbpath=/data  --logpath=/data/log/mongod.log --fork

衔接数据库

cd /usr/local/mongodb/mongodb-linux-x86_64-rhel70-5.0.14/bin
./mongo

装置 nginx

首先 cd /usr/local 到 local 文件目录下，在 local 文件夹中经过指令 mkdir nginx 创立 nginx 文件夹，接着 cd nginx 进入 nginx 文件夹，运用 rz nginx-1.22.1.tar.gz 指令将下载好的 nginx 紧缩包上传到 nginx 文件夹中。接着在 nginx 文件夹中经过 tar -vxf nginx-1.22.1.tar 解压该 tar 包。详细指令顺次如下：

cd /usr/local
mkdir nginx
cd nginx
rz  #挑选 nginx-1.22.1.tar.gz
tar -vxf nginx-1.22.1.tar

履行 configure 等指令

进入 /usr/local/nginx/nginx-1.22.1 文件目录中，顺次按如下指令履行：

cd /usr/local/nginx/nginx-1.22.1
./configure  #装备软件的编译参数和环境设置
make  #运用 make 指令来编译软件
make install  #将编译好的软件装置到体系中
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf  #指定其装备文件的途径

nginx.conf 装备

#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile  on;
  keepalive_timeout   65;
  client_max_body_size  100m;  #上传size改为20m，避免文件过大无法上传
  #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  logs/access.log  main;
  #tcp_nopush     on;
  #keepalive_timeout  0;
  gzip  on;
  server {
    listen       80;
    server_name  localhost;
    #charset koi8-r;
    #access_log  logs/host.access.log  main;
    location / {
    root  /usr/local/nginx/dnhyxc/dist; #设置前端资源包的途径
    index   index.html  index.htm;  #设置前端资源进口html文件
    try_files   $uri  $uri/ /index.html;  #处理 browserRouter 页面改写后呈现404
  }
  location /api/ {
    proxy_set_header  Host  $http_host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  REMOTE-HOST $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass  http://localhost:9112;
  }
  location /admin/ {
    proxy_set_header  Host  $http_host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  REMOTE-HOST $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass  http://localhost:9112;
  }
  location /image/ {
    root  /usr/local/server/src/upload/image;
    rewrite  ^/usr/local/server/src/upload/(.*) /$1 break;
    proxy_pass  http://localhost:9112;
  }
  location /atlas/ {
    root  /usr/local/server/src/upload/atlas;
    rewrite  ^/usr/local/server/src/upload/(.*) /$1 break;
    proxy_pass  http://localhost:9112;
  }
  location /files/ {
    root  /usr/local/server/src/upload/files;
    rewrite  ^/usr/local/server/src/upload/(.*) /$1 break;
    proxy_pass  http://localhost:9112;
  }
  #error_page  404  /404.html;
  # redirect server error pages to the static page /50x.html
  #
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
      root   html;
  }
  # proxy the PHP scripts to Apache listening on 127.0.0.1:80
  #
  #location ~ .php$ {
  #    proxy_pass   http://127.0.0.1;
  #}
  # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
  #
  #location ~ .php$ {
  #    root           html;
  #    fastcgi_pass   127.0.0.1:9000;
  #    fastcgi_index  index.php;
  #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
  #    include        fastcgi_params;
  #}
  # deny access to .htaccess files, if Apache's document root
  # concurs with nginx's one
  #
  #location ~ /.ht {
  #    deny  all;
  #}
}
server {
  listen  9216;
  server_name  localhost;
  location / {
    root  /usr/local/nginx/html/dist;
    index   index.html  index.htm;
    try_files   $uri  $uri/ /index.html;
  }
  location /api/ {
    proxy_set_header  Host  $http_host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  REMOTE-HOST $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass  http://localhost:9112;
  }
  location /image/ {
    root  /usr/local/server/src/upload/image;
    rewrite  ^/usr/local/server/src/upload/(.*) /$1 break;
    proxy_pass  http://localhost:9112;
  }
  location /files/ {
    root  /usr/local/server/src/upload/files;
    rewrite  ^/usr/local/server/src/upload/(.*) /$1 break;
    proxy_pass  http://localhost:9112;
  }
  error_page  500 502 503 504 /50x.html;
  location = /50x.html {
    root  html;
  }
}
server {
  listen  9116;
  server_name  localhost;
  location / {
    root  /usr/local/nginx/html_web/dist;
    index   index.html  index.htm;
    try_files   $uri  $uri/ /index.html;
  }
  location /api/ {
    proxy_set_header  Host  $http_host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  REMOTE-HOST $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass  http://localhost:9112;
  }
  location /image/ {
    root  /usr/local/server/src/upload/image;
    rewrite  ^/usr/local/server/src/upload/(.*) /$1 break;
    proxy_pass  http://localhost:9112;
  }
  location /files/ {
    root  /usr/local/server/src/upload/files;
    rewrite  ^/usr/local/server/src/upload/(.*) /$1 break;
    proxy_pass  http://localhost:9112;
  }
  error_page  500 502 503 504 /50x.html;
  location = /50x.html {
    root  html;
  }
}
server {
  listen  9612;
  server_name  localhost;
  location / {
    root  /usr/local/nginx/web/dist;
    index   index.html  index.htm;
    try_files   $uri  $uri/ /index.html;
  }
  location /api/ {
    proxy_set_header  Host  $http_host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  REMOTE-HOST $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass  http://localhost:9112;
  }
  location /image/ {
    root  /usr/local/server/src/upload/image;
    rewrite  ^/usr/local/server/src/upload/(.*) /$1 break;
    proxy_pass  http://localhost:9112;
  }
  location /files/ {
    root  /usr/local/server/src/upload/files;
    rewrite  ^/usr/local/server/src/upload/(.*) /$1 break;
    proxy_pass  http://localhost:9112;
  }
  error_page  500 502 503 504 /50x.html;
  location = /50x.html {
    root  html;
  }
}
server {
    listen  8090;
    server_name  wwww.dnhyxc.cn;
    location / {
      root  /usr/local/nginx/html_admin/dist;
      index   index.html  index.htm;
      try_files   $uri  $uri/ /index.html;
    }
    location /admin/ {
      proxy_set_header  Host  $http_host;
      proxy_set_header  X-Real-IP $remote_addr;
      proxy_set_header  REMOTE-HOST $remote_addr;
      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_pass  http://localhost:9112;
    }
  }
}

布置前端资源

进入 /usr/local/nginx/html，之后将打包好的前端资源包 dist.zip 运用 rz 指令上传到 html 文件夹中，接着运用 unzip dist.zip 将 dist.zip 解压。

由于 nginx 的装备是资源途径是 /usr/local/nginx/dnhyxc/dist，所以需求将 html 文件夹中的本来的 index.html 文件删去。

html 文件夹内容如下：

dist 文件夹下内容如下：

文件解压完结之后，输入如下指令发动 nginx 服务器：

cd /usr/local/nginx/sbin
./nginx -s reload  #发动 nginx

履行完上述指令，假如没有报错，那恭喜你，前台项目布置成功了。

布置后端资源

cd /usr/local 到 local 文件夹中，接着输入 mkdir server 创立一个 server 文件夹。

cd server 进入到 server 目录下，接着输入指令 rz 上传紧缩好的后端项目紧缩包，我的后端服务是运用 koa 写的，所以这个紧缩包中就包含了：package.json，src，yarn.lock 文件。上传完结后，输入 unzip server.zip 将项目解压到 server 目录下，解压完结后运行 yarn 或者 npm install 装置项目所需装置包。装置完结后，server 文件夹中包含如下文件：

接着运行 pm2 start ./src/main.js 发动项目。

详细指令如下，顺次履行即可：

cd /usr/local
mkdir server
cd server
rz # 挑选紧缩好的后台服务紧缩包
unzip server.zip
yarn install
pm2 start ./src/main.js  #项目进口文件
pm2 list  #检查服务是否安稳运行，能够多履行几遍，避免服务发动后又挂了的情况

以上指令履行完结之后，假如没有报错，那恭喜你，后台服务也布置成功了，能够经过购买服务器的公网 ip 拜访自己的网站了。

处理 pm2 发动项目时 status 一直为 error 的情况

在服务器中顺次履行下列指令即可：

ps aux | grep pm2
kill -9  pm2项目对应的进程
pm2 update

重启 nginx

前端资源布置完结之后，需求重启 nginx 使布置的资源收效。进入 /usr/local/nginx/sbin 目录下，履行 ./nginx -s reload 即可重启项目。

重启服务

运用 pm2 list 检查项目是否在发动状态，假如在发动状态的化，运用 pm2 delete 项目发动id（id一般是 0） 封闭本来发动的项目。接着运用 pm2 ./src/main.js 重新发动项目。

pm2 常用指令

pm2 start ./src/main.js：发动项目。

pm2 list：显现一切进程信息。

pm2 info 进程 id（如：0）：显现 id 为 0 的进程详细信息。

pm2 monit：进入监督页面，监督每个 node 进程的 CPU 和内存的运用情况。

pm2 stop/delete 0：中止/删去 id 为 0 的进程。

pm2 stop/delete all：中止/删去一切进程。

pm2 restart 0：0 秒停机重载 id 为 11 进程（用于 NETWORKED 进程）。

pm2 reload 0：重启 id 为 0 的进程。

pm2 restart all：重启一切进程。

pm2 restart all：重载一切进程。

pm2 logs：显现一切进程的日志。

pm2 logs 0：显现进程 id 为 0 的日志。

pm2 flush：清空一切日志文件。

pm2 reloadLogs：重载一切日志。

pm2 startup：产生 init 脚本，保持进程活着。

如何将自己的前后台项目部署到服务器上

服务器准备

node、mongodb、nginx 紧缩包准备

装置 node、pm2、yarn

装置及发动 mongodb

衔接数据库

装置 nginx

履行 configure 等指令

nginx.conf 装备

布置前端资源

布置后端资源

处理 pm2 发动项目时 status 一直为 error 的情况

重启 nginx

重启服务

pm2 常用指令

作者信息

推广

如何将自己的前后台项目部署到服务器上

服务器准备

node、mongodb、nginx 紧缩包准备

装置 node、pm2、yarn

装置及发动 mongodb

衔接数据库

装置 nginx

履行 configure 等指令

nginx.conf 装备

布置前端资源

布置后端资源

处理 pm2 发动项目时 status 一直为 error 的情况

重启 nginx

重启服务

pm2 常用指令

相关文章

构建实时聊天应用：UniApp实战开发指南

使用echarts自身数据地图下钻至省

语言模型和预训练

SwiftUI 工程师的 Flutter 指南

作者信息

推广