我不知道的前端部署

双十一期间，趁着新人优惠，购买了服务器和域名，准备好好捣鼓一下我不知道的前端部署知识，下面就和大家分享一下我的心得。

购买服务器和域名

首先呢，需要在正规的平台上购买域名和服务器，如果是学生用户的话，优惠力度还是很大的。购买以后，需要进行域名备案，否则是不能正常使用的。具体备案的手续和环节，这里就不多叙述了，有问题可以留言。

域名解析

在域名列表页，直接点击解析就行。

然后我们就可以发现在解析记录页面是没有任何记录的。

直接点击新手引导。在出现的弹窗中输入服务器的公网IP，这样就可以直接同时添加'www'及'@'两条记录。什么意思呢，比如通过www.baidu.com和baidu.com都可以访问百度啦。

登录服务器

在实例列表界面，在点击远程连接按钮。

进入以后，需要输入远程连接密码。如果你不知道密码的话，那就直接点击重置密码吧。 然后就可以顺利的进入了我们的服务器。可以看到，这里我安装的是最新的CentOS系统。

接下里我们就需要登录啦。默认的用户名为root，密码如果你不知道的话，还是老规矩啦，直接去服务器实例列表重置一下。

登录成功，Welcome to Alibab Cloud Elastic Compute Service!

安装nginx

至于为什么要安装nginx，或者什么是nginx，我这里就不展开了。因为惭愧，我也没弄懂。但是作为一个前端工程师，我觉得还是很有必要掌握一点nginx的知识的，正所谓技多不压身。

• 安装一下依赖，直接输入以下命令即可。

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

• 下载nginx包

cd /usr/local
mkdir nginx
cd nginx
下载nginx的tar包
wget http://nginx.org/download/nginx-1.13.7.tar.gz
解压
tar -xvf nginx-1.13.7.tar.gz

• 安装nginx

进入刚才创建的nginx-1.13.7目录
cd /usr/local/nginx/nginx-1.13.7
执行命令
./configure
执行make命令
make
执行make install命令
make install

• 启动nginx

cd /usr/local/nginx/sbin
执行命令
./nginx -t
重启服务器
./nginx -s reload

在我们的本地浏览器中，输入服务器的公网IP。如果出现以下的界面，那么我要告诉你，朋友，你已成功安装并且启动了服务器。

安装Git

需要通过版本控制工具将代码拉取到服务器中。

直接输入命令即可
yum install git
安装完毕后，可以查看Git的版本信息
git --version

拉取项目代码

进入/usr/local目录
cd /usr/local
创建project文件夹
mkdir project
cd project
拉取远程仓库代码
git clone ********

修改服务器配置

接下来就是本文的最后的一部分内容了，当然也是最重要的内容，修改nginx服务器的配置。

cd /usr.local/nginx/conf
vim nginx.conf

找到这部分代码，修改root项即可。

我们的代码在/usr/local/project目录下。以react项目为例，一般需要通过 npm run build 或者yarn build 对项目进行打包处理，生成一个buidl目录，该目录下会有最终生成一个index.html文件，我们要做的就是要将root指向这个html文件即可。

修改完配置以后，我们需要重启服务器，方能使配置生效。注意啦，注意啦，最后build后面一定要加上/。

cd /usr/local/nginx/sbin
./nginx -s reload

大功告成

通过以上步骤，已经完成了基本的前端部署任务。下面，在本地浏览器中输入服务器公网IP或者直接输入我们的域名，就可以看到我们写的前端页面啦。

感悟

作为一个新手，以上看似简单的步骤，其实也是踩了很多坑的。希望我总结的步骤，可以给你们带来更多的便利。最后来一波鸡汤，路漫漫其修远兮，吾将上下而求索。 对于nginx或者前端部署，我还有很多要学的。本文中，如果有什么错误的地方，欢迎大家留言指出。

参考

LINUX安装nginx详细步骤