手摸手教你如何从零一步一步部署一个前端项目到远程服务器~~(欢迎收藏)

写这篇文章的背景

我们这里用的是CentOS7的服务器，部署的整个流程都比较通畅，没有遇到什么坑，如果没有自己独立部署过前端项目的小伙伴可以先收藏着，方便自己下次部署项目的时候查询哈。

背景是这样的，我帮朋友做了一个React小项目，然后需要将其部署到服务器上让别人访问。朋友去买了一个Tencent云的服务器，让我赶紧将它部署到上面，但是我现在手头只有一台Windwos10的游戏本，以前没有用Windows系统去部署过项目，这次就索性研究一下看看咋搞。至于没有服务器但又想部署项目的同学嘛，可以直接去到Tencent云或者Ali云去买一个就行，如果是学生就100左右一年，顺带花个十几二十块买个域名备个案，将域名解析到对应的服务器IP地址上就能够通过域名访问服务器了。

PS：怎么买服务器这里就不说了哈，可以去腾讯云/阿里云官网购买，买了之后会得到一个ip地址和密码，然后用本机去连接远程服务器就好了，下面我们就来说说这一步骤。

XShell面板-更好用的Windows控制台

这里我们要说的是怎么用Windows系统去做配置，如果是MacOS的话，直接用系统自带的命令行去连接远程服务器就好了。用MacOS的同学可以跳过Xshell这一章节，另外也可以看看我另一篇关于配置的文章从0开始配置Mac前端基本开发环境

ssh root@远程服务器ip地址
# 然后输入密码就ok
复制代码

我们要部署项目肯定要先能连接到远程服务器上对吧，在Windows系统上我们要链接远程服务器有很多种方法， 其中我用到的工具是Xshell，打开官网，我们可以看到下面有免费的版本，商用版是收费的。

点开免费授权页面之后我们只要填写姓名和邮箱就可以了，邮箱就会收到一个下载链接，下载下来就能用了。

下载完之后打开。点击新建，然后输入服务器的IP地址，点击确定就OK了

点完确定之后我们可以看到左边的会话管理器会出现我们刚刚新建的服务器，双击它之后可以看到登录界面，先输入登录用户名，一般服务器初始化用户名都是root

输入完用户名之后就可以看到这样一个界面，可以使用密码登录或者使用密钥登录，因为我朋友那边给出了一个密钥我，所以我这边就选择了用密钥登录，将密钥保存到本地之后，点击浏览打开密钥，然后输入服务器密码即可。

输入完成之后点击确定，然后看看是否连接服务器成功。看到这样的一行信息就表示连接成功了，这时候我们就可以对服务器进行操作啦。

安装环境

进入到服务器之后我们首先就是要对我们的服务器环境进行搭建

安装git

yum –y install git
复制代码

出现Complete!说明安装成功

查看git版本

git --version
复制代码

初始化git

安装好git之后就要进行初始化操作。第一次使用git的时候我们需要给git配置用户名和邮箱，用户和邮箱可以使用github的，也可以使用gitlab仓库的账号

配置用户名

git config --global user.name "用户名"
复制代码
复制代码

配置邮箱

git config --global user.email "邮箱地址"
复制代码
复制代码

配置好这个以后我们输入便可以看到我们所有的配置信息了，然后可以看到user.name和user.email配置得对不对

git config -l
复制代码

下载Node.js环境

我们在这里使用nvm(node版本管理工具)去安装Node，首先我们下载nvm，输入下面的命令

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
复制代码

或者

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
复制代码

执行命令后可以看到nvm从git clone到/root/.nvm目录下，耐心等待一段时间就好啦

如果下载出现报错的情况，多半是下载速度太慢产生的问题，导致无法从git拉到项目

解决办法就是调整网速限制范围再尝试一下下，命令行输入如下指令

git config --global ssh.lowSpeedLimit 0
复制代码

git config --global ssh.lowSpeedTime 999999
复制代码

然后再执行下载nvm的命令，可以看到成功下载了

我们刚下载完其实是用不了nvm指令的，看官方文档我们可以看到，如果你执行nvm -v指令之后显示command not found，

那就关了当前的控制台，重新打开一个新的控制台再尝试一遍，或者执行下面三个指令中的一个，我们这里就用的bash，执行下面指令就行，执行完这个指令之后再执行nvm -v显示版本号就可以使用nvm啦

source ~/.bashrc
复制代码

接下来我们可以执行下面指令可以看到所有的node版本，选择最新版下载就行，我们当前node最新版是v16.3.0

nvm ls-remote
复制代码

然后再执行

nvm install v16.3.0
复制代码

到这里我们的node就安装成功咯

部署前端项目-Nginx

安装nginx

yum –y install nginx
复制代码

出现Complete!之后就安装成功了

测试nginx配置并查看文件位置

nginx -t
复制代码

创建放置静态资源的文件夹，用来存放自己的项目

mkdir /www
复制代码

然后我们输入下面的指令便可以看到我们的www文件夹了，root文件夹里一般放置一些配置文件，比如nvm或者git这些，而etc里面放着nginx的配置文件

cd / 跳转到服务器根目录
ls -a  查看当前路径下的所有文件
复制代码

接下来我们到www目录下拉取我们git上面的项目下来，执行下面指令

cd www
git clone 项目地址
cd 项目名称
npm install  
# npm install慢的导致安装失败可以使用淘宝镜像源
# npm install -g cnpm --registry=https://registry.npm.taobao.org
使用cnpm install
npm run build

# 在这里我用的是yarn
复制代码

项目资源配置好之后，就可以打开nginx进行静态资源服务器的配置了，输入下面的指令打开nginx配置

vim /etc/nginx/nginx.conf
复制代码

输入vim进入到文件之后，按i键进入INSERT模式，按esc键退出输入模式，然后输入:wq保存退出之后再在命令行输入下面指令重启nginx服务

nginx -s reload
复制代码

这里贴出基本的配置，端口号我们就用默认的80端口号

server {
        listen 80;  # 端口号
        server_name localhost; # 有域名就填域名，没有就填ip地址或者本机

        include /etc/nginx/default.d/*.conf;

    	location / {
        root /www/项目目录/build;   # 打包后的文件目录
        index index.html index.htm;
        try_files $uri $uri/ @router;  # 开启了browserRouter模式就写这个
        }

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

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
	}
复制代码

配置好之后并重启nginx，然后去浏览器上输入你的IP地址就可以访问到项目啦~~

端口、防火墙

CentOS7默认安装了firewalld防火墙，如果系统开启了防火墙，那我们就要手动去开放端口号

查看防火墙是否开启

systemctl status firewalld
复制代码

开启防火墙

systemctl start firewalld 
复制代码

关闭防火墙

systemctl stop firewalld
复制代码

防火墙开机自启

systemctl enable firewalld
复制代码

停止并且禁用防火墙

sytemctl disable firewalld
复制代码

重启防火墙

firewall-cmd --reload
复制代码

查看目前已开放端口

netstat -anp
复制代码

查看指定端口是否已经开启-前提是要先开启防火墙

firewall-cmd --query-port=9090/tcp
复制代码

对外开放端口号

firewall-cmd --add-port=123/tcp --permanent # permanent表示永久开放，没有此参数重启后失效
# 重新加载添加的端口
firewall-cmd --reload
复制代码

关闭开放端口号

firewall-cmd --permanent --remove-port=9090/tcp
复制代码

总结

好了，今天就先记录到这里了，经过这次的配置，我自己对Linux的指令和前端项目也有了更多的了解，在此记录下来这次的部署历程。另外其实可以用docker进行部署会更方便(虽然我还没学，有时间就去学)。方便自己以后查询也希望能给一些从来没有自己部署过前端项目的小伙伴带来帮助。