用最简单的方式部署一个前端项目(全流程)

2,809 阅读6分钟

前言

技术涉及:Linux、Node(.js)、express(.js)

最近用 Umi4 做了个微型项目(💬一个 React 项目~),想在服务器上简单的部署一下。对于只会写页面的小白来说,如何尽量快的把页面部署在服务器上,且能被人访问到呢,请往下看......

PS. 看到有在用 Windows 系统服务器的朋友,本来也想搞个 Windows 的 —— 看朋友直接在服务器跑 VSCode 美滋滋。后来发现服务器内存根本伤不起,像我服务器内存 2G 的(内存大的对个人来说成本💰太高),一下就占用 90% 了。索性上了无图形化界面的 Linux,完全够用了!

准备

在正式开始前需要准备些什么

  1. 打包项目

在部署之前我们自然需要有东西部署,虽然你也可以直接建一个 html 文件先试试!一般我们都是用框架开发,在根目录下面的 package.json 文件中都能看到一个 build 命令 ,直接在命令行中执行 npm run build 或者 yarn build 就可以获得项目打包后的产物了!

  1. 拥有一个服务器

现在国内基本有如下选择:阿里云、腾讯云、华为云...具体评测网上都有,新用户基本都有活动价(学生可以免费获取),这边选择了起步较早的阿里云,随便整了一台 共享s6(1核2G - Linux系统)

开始

准备好了打包后的项目、一台 Linux系统的服务器后,我们就可以开始了

登陆服务器

先进行密钥对登陆:绑定密钥对使用密钥对登陆

《使用密钥对登陆》文档直接看橘色部分:

初次登陆成功后在服务器中输入 passwd 就可以进行 root 用户密码的修改

有密码之后,就可以用如下方式登陆 root 用户了:

(如果在登陆状态,可以先使用 exit 退出登陆 )

ssh root@[服务器公网IP]


传输文件

我们需要把我们的项目传输到服务器,试了很多方法最简单快捷的还是 scp

注意:在自己的电脑上(非服务器) 输入以下命令进行文件传输

scp -r [打包后的产物文件路径] root@[服务器公网IP]:~/


安装必要环境

接下来就需要在服务器中安装必要环境了

安装 node 环境

yum -y install nodejs

安装 npm 包管理器

yum -y install npm


运行项目服务

所有操作均在 root 文件夹中操作

  1. 创建空文件夹

先创建一个空文件夹作为我们的项目文件夹,方便后期管理

mkdir [项目件夹名]

  1. 移入之前我们传进来的产物

mv [产物文件夹名] [项目文件夹名]

  1. 创建 app.js 文件

先 cd [项目文件夹] 到之前创建的项目文件夹中,通过 ll 命令可以看到文件夹里面已经有产物了

touch app.js

在 app.js 中写入 相关内容

进入编辑状态:vi app.js

按 i 开始编辑,粘贴如下内容:

const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'dist')));
app.listen(8080, () => {
  console.log('app listening on port 8080');
});

按 esc 退出编辑,再输入 :wq 保存文件并退出

在包含了产物和app.js文件的项目文件夹中输入,npm i express 安装 express 环境

然后输入 node app.js 项目就在 8080 端口跑起来了,但是我们在网页上输入 [服务器公网IP]:8080 还访问不到,因为防火墙还没有将 8080 端口暴露出来,因此我们先 Ctrl C 把项目终止。


暴露端口

先查看一下防火墙是否已开启:

firewall-cmd --state

如果输出 running 则防火墙已开启

想要查看防火墙详细信息可以通过以下方式查看

systemctl status firewalld

如果服务器开启了会显示如下内容:

防火墙状态

下面是对防火墙的基本操作:

# 开启
systemctl start firewalld.service 
# 重启
systemctl restart firewalld.service 
# 关闭
systemctl stop firewalld.service 

注意:没有开启防火墙的人记得开启哦!

查看 8080 端口是否开放

firewall-cmd --query-port=8080/tcp

发现输出 no,下面我们要开放该端口

firewall-cmd --permanent --add-port=8080/tcp

然后重启防火墙:

firewall-cmd --reload

这样我们端口就正常开放了,未来如果想要管理开放的端口可以拓展下如下命令:

# 查看所有已开放的端口
firewall-cmd --list-ports。
# 查看所有永久开放的端口
firewall-cmd --list-ports --permanent。
# 移除已暴露的端口
firewall-cmd --permanent --remove-port=[端口号]/tcp

注意:在服务器中开放端口阿里云还是会保护相关端口不被外部访问

这种时候我们需要去云服务器控制台中选择服务器的实例界面进入安全组配置:

进入安全组配置

然后点击配置规则:

就可以手动在访问规则中添加要暴露的端口号了

进入添加规则界面:

具体信息填写:

然后重启一下服务器,端口暴露就生效了


最后

我们回到项目根目录,运行 node app.js & 这种 & 方式会持续在后台输出命令,意外终止后也不会自动重启,详细可以了解下 nohup 进行优化

项目就在后台跑起来了,这时候就可以正常通过 IP + : + 端口号 的方式在浏览器访问网页了

之后可以对后台项目进行管理

# 查看当前在后台运行的命令
jobs
# 将后台中的命令调至前台继续运行,如果有多个才需要加 %[命令编号]
fg %[命令编号]
# 在前台终止命令运行
键盘快捷键 Ctrl + C
# 在后台终止命令运行
kill %[命令编号]

当你断开与服务器的链接后,下次连接用 jobs 就找不到那条命令了,但是服务还在跑(我是这样的)。然后就需要通过管理端口的方式对服务进行管理:

# 查看 8080 端口的使用情况,可以看到进程 ID,不输入 | 及后面的内容为查看全部
netstat -ntulp | grep 8080
# 关闭端口服务,释放端口
kill -9 [进程ID]
  • 想要学习稍微复杂点的部署方式,之后可以去研究一下 nginx ,优化一下项目的部署 (反向代理、静态资源...)