手里有node后端服务项目和vue前端服务项目，但是只能在本地跑着玩，给自己看。那把它们部署到服务器上不就可以在线演示，给所有人看了吗？
话不多说，搞起
整一个个人网站
服务器的准备
华为云服务器，阿里腾讯云服务器流程大致相同
华为云付费购买指南
远程连接服务器测试
项目运行环境搭建
项目部署
node服务部署
vue服务部署
总结
服务器的准备
华为云服务器，阿里腾讯云服务器流程大致相同
部署服务器，首先得有一个服务器，门槛低的，最快上手的就是租一个云服务器，云服务器里linux系统都给你安装好了，相当于给你个新电脑自己去装服务环境就行了。
我选择的是华为云弹性服务器ECS，还不确定后面会不会坚持下去，所以先租一个按需收费的服务器。首先注册一个华为云账号，然后购买流程可以看下华为云文档，里面有每个参数的介绍。这里重点是便宜！便宜！便宜！ 配置高的入门初级也不需要，等后面真的要的话可以修改配置的，很方便。
我这边重点说几个参数：
计费模式选按需计费，区域没啥区别随便选
CPU架构及规格：选择鲲鹏，规格选1vCPUs1G或者2vCPUs4G
弹性公网IP：现在购买，带宽选择按流量计费，笔者的贵阳一区域是0.64元/G其他地方好像会贵点，做个demo的话用不了多少。带宽默认，如果想网速速度快点选大点
其他的话就按默认走，后面都是可以改的，不慌
最终配置好后购买完会在控制台看到你购买的云服务器
一开机就开始计费，费用情况在费用中心查看
华为云付费购买指南
如果想购买华为云服务器得话，官网路径在每年的三月开工季优惠力度最大。
如果想全年购买便宜的云服务器可以找笔者，私信、评论或者扣扣2628963670：备注服务器购买
至于便宜了多少大家可以去官网上看下同配置得价格，重点：5M带宽
远程连接服务器测试
首先在云服务器的安全组添加新的入方向规则
查看服务区安全组名称
修改服务区安全组入方向规则
添加规则： 加入80端口nginx用的，3306端口数据库用的，22端口服务器用的，这样就使用navicat、xshell和浏览器测试服务是否启用。
项目运行环境搭建
mysql数据库安装
官方文档给的介绍是用安装包安装，但是我没看懂有点笨。我是使用yum命令安装的，yum相当于centos的包管理工具，和npm作用有点类似。
命令如下
// 安装
yum install mysql mysql-server
// 查看是否安装成功
rpm -qa | grep mysql
// 启动mysql服务。
systemctl start mysqld.service #启动 mysql
systemctl restart mysqld.service #重启 mysql
systemctl stop mysqld.service #停止 mysql
systemctl enable mysqld.service #设置 mysql 开机启动
// 最后查看端口使用情况，默认mysql运行在3306
netstat -ntlp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
至于新建mysql用户、授权啥的自行百度了，创建成功后可以用navicat远程连接看看行不行。
nginx安装
// 安装nginx
yum install nginx
// 查看是否安装成功
rpm -qa | grep nginx
// 启动、关闭、重启nginx
service nginx start
service nginx stop
service nginx reload
// 也可以启动Nginx并设置开机自动运行
systemctl start nginx.service
systemctl enable nginx.service
// 最后查看端口使用情况，默认nginx运行在80
netstat -ntlp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
在浏览器中输入您的服务器地址：服务ip，出现这样页面说明就是成了
node环境安装
这边我使用nvm来安装node，这样后面切换node版本方便
// 安装git
yum install git
// 查看git版本
git --version
// 选择你要安装nvm的目录，我这边选着安装这/usr/local目录下
抄底/usr/local
// 安装nvm
git clone git://github.com/creationix/nvm.git ~/nvm
// 查看nvm版本,说明安装成功
nvm -v
// 设置nvm自动运行
echo "source /usr/local/nvm/nvm.sh" >> ~/.bashrc // 根据你的安装地址相应改变
source ~/.bashrc
// 查询远程Node.js版本
nvm ls-remote
// 安装node版本
nvm install v12.13.0
// 查看本地node版本
nvm ls
// 切换node版本
nvm use v12.13.0
// 查看node安装情况
npm -v
node -v
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
这样需要的环境软件都准备好了
项目部署
部署需要用到FTP客户端软件FileZilla，免费的
node服务部署
找一个地方创建两个文件夹，一个后端项目用，一个前端项目用。我这边放在root目录下
// 到root目录下创建文件夹
cd ~
mkdir service
mkdir service/serve service/backups // 一个服务一个备份
mkdir web
mkdir web/dist web/backups
1
2
3
4
5
6
用FileZilla将后端服务传到服务器。切记： 有些不改传的文件别传，比如node_modules、logs日志文件等。上传完毕测试下能不能正常跑起来，测试过程和本地起服务测试一样
node服务开机自启
这里需要用到一个骚包：pm2
pm2 是一个带有负载均衡功能的Node应用的进程管理器。当你要把你的独立代码利用全部的服务器上的所有CPU，并保证进程永远都活着，0秒的重载,，PM2是完美的。
// 安装
npm i -g pm2
// 在node项目的package.json修改一个执行命令，如果没有就加上
// ...意思是启动服务，服务命名为koaServer,并当文件变化时自动重启应用
"prd": "pm2 start bin/www --name=koaServer --watch",
// ...
# 创建开机自启动命令
pm2 startup
1
2
3
4
5
6
7
8
9
10
这样node服务就能在服务器上开机自启了，测试下服务是否成功在浏览器输入：ip:端口号。如果有返回数据说明服务启动成功，像下面这样
vue服务部署
前端项目的话就build打包一下，把生产的dist文件用FileZilla传到服务器上你创建好的文件夹下，以我为例就是 /root/web/dist下
nginx配置
配置的目的就是把我们的前端页面显示出来，打开nginx的配置文件，我这边是在/usr/nginx下，有一个nginx.conf文件。
如果你们不知道配置文件在哪的话，可以使用：whereis nginx 命令看下所有的nginx有关的文件夹有哪些，一个个找，没几个很快。
// 打开配置
vim nginx.conf 按 i 进入编辑模式( nginx的配置文件在/etc/nginx/nginx.conf)
1
2
3
// 修改serve部分的配置，当然也可以自行百度
server {
listen 80 default_server; # 服务端口
listen [::]:80 default_server;
server_name _; # 域名地址，使用域名打开网页时配置
# root /root/project/web/dist;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
root /root/web/dist; # 部署的前端页面地址
index index.html;
}
error_page 404 /404.html;
location = /40x.html {
root /usr/share/nginx/html; # 原有的40x页面
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html; # 原有的50x页面
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
按ecs + :wq保存并退出
// 重启nginx
service nginx restart
// 查看端口情况，保住80、3306端口都启动
netstat -ntlp
1
2
3
4
5
到这，基本就差不多了
在浏览器输入：弹性公网ip。如果出现403页面需要修改nginx配置
找到第一行：user nginx，修改为user root
保存退出，重启nginx，此时如果页面还是403就再排查，笔者修改完user root后就可以访问页面了
如果跳出页面，比如下面这样。说明部署成功测试，然后后端接口是否也可行。
到此，我们的项目就顺利再服务器上跑起来了，再申请个域名下，就成为了一个真正的网站了。
总结
整个流程梳理下来就是：
服务器配置（如果是租用云服务器的linux系统都是安装好的）
数据库、后端环境安装，nginx安装（如果没用到数据库就不用安装，步骤更少）
前后端项目部署
数据库、nginx、后端服务开机自启设置
nginx配置
浏览器打开测试
过程不会很难，就是很花时间，如果对linux、sql啥的命令不熟悉就更慢了。
部署好后有种打开新世界大门的感觉，既可以展示自己的案例，也可以动手创建一个属于自己的博客网址，还可以给自己当云网盘，怎么用就看你们的发挥了。
关于云服务器： 用完了切记关机，这样省钱。如果想转包年/包月可以等活动的时候再买，我前几天看妇女节活动三年1500，活动过后三年2700，翻了近一倍。
好了，就到这，如果中间有啥报错或者不懂得可以评论留言，或者自行百度找答案。
常用命令FinalShell
重启ng service nginx restart
查看当前使用端口 netstat -ntlp
查找文件 [root@ecs-329216 ~]# whereis nginx.conf
启动命令 [root@ecs-329216 ~]# /root/node-v14.15.1-linux-x64/bin/serve dist————————————————
版权声明：本文为CSDN博主「高素质车间工人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38734862/article/details/114969477
