[[416024]]
您将获得：
如何合理选择服务器、如何将域名解析到服务器、服务器配套软件的安装和环境配置、通过命令行上传自己的网站到服务器、网站部署和运维（负载均衡等）接下来，我们就开始战斗吧！
1. 如何合理选购一台服务器
对于服务器的选择，我们主要有以下几种选择：
阿里云、腾讯云、华为云、亚马逊云的国内用户如果没有特殊需求可以选择前三者。这里我以阿里云为例。当然，其他服务器的配置也是一样的。
1.1 服务器位置的选择我们都知道服务器的不同配置是有特殊性的，在一定程度上关系到我们网站的用户体验。在选择服务器地址之前，我们需要清楚地知道我们网站的用户群体主要集中在哪个区域。
例如，如果我的用户在上海，我们可以在区域和可用区选项中选择华东2（上海）等等。
1.2 服务器镜像的选择
目前我们常用的服务器镜像有：个
您可以根据自己的使用习惯选择centoswindows ServerUbuntu。我一般选择centos。接下来介绍一下使用centos的相关配置。
1.3 服务器系统盘存储的选择
系统存储的选择也需要结合自己的网站。如果网站是资源型网站，内容较多（图片、视频等），可以选择稍大一点的，比如100G以上。一般一个个人网站或者测试网站50G就足够了，毕竟一份存储一部分钱。
1.4 服务器带宽选择
一般为了给用户良好的网站体验，我们会增加带宽来减少网站加载时间。但是一味的增加带宽会大大增加服务器的成本，所以一方面我们需要对网站本身进行优化，另一方面我们也需要对网站本身进行优化。可以使用对象存储，这样我们就可以控制一定的带宽。例如H5-Dooring目前的带宽约为10M，每年的服务器成本约为1-2W。但对于一些测试类型和个人网站来说，选择2-5M都在合适的范围内。
当然，您也可以选择按流量付费。
1.5 服务器规格选择
如果是个人使用，对吞吐性能没有太多要求，可以选择1核1G低端版本。但建议您个人网站选择1核2G或2核4G。也许您的网站会突然失败？
至于服务器的其他配置，大家可以随意选择，也可以直接使用默认的。
2. 如何将域名解析到服务器上
当我们购买服务器后，我们可以在控制台看到我们服务器的公网IP。这也是域名解析的关键。域名可以直接在云服务平台购买。一般一个域名价格在20-60元之间，建议使用.com、cn域名。目前，其他后缀的域名也是可以接受的，具体取决于您网站的定位。
我们只需要在云服务的域名管理中添加需要解析的服务器记录即可。
上图中常用的主机记录配置有www和@，我们可以选择任意一种。 （主机记录相当于域名的前缀）
记录的值就是我们服务器的IP，也就是上面说的公网IP。我们配置好之后，点击确认，等待5-10分钟就可以解析完成，不过一般都是在3分钟之内。
通过上面的方法，我们的域名已经成功解析到对应的服务器上。是不是很简单呢？ （前提是域名必须注册，至于如何注册，也很简单，按照云厂商的说明操作即可）
3. 服务器配套软件的安装和环境配置
有了上面的服务器配置基础，我们开始“反转”服务器。作为一个前端程序员，服务器上没有nodejs是不合理的！接下来我们开始安装nodejs。安装之前我们需要先进入服务器终端：
密钥对一般在服务器列表右侧较多的下拉项中。通常我们第一次需要重置密钥对。设置密钥对后，我们在计算机的终端中输入以下命令：
sshroot@你的公网IP并在终端中输入密码即可进入服务器。
如果服务器没有wget，我建议你安装它。毕竟后面很多场景都会用到它。
yuminstallwget 和我们的npm 类似吗？然后我们就可以愉快的安装nodejs :了
#安装nodejswgethttps://nodejs.org/dist/v14.15.4/node-v14.15.4-linux-x64.tar.xz#解压tarxfnode-v14.15.4-linux-x64.tar.xz解压完成后我们可以手动进入nodejs bin 目录，测试nodejs是否可用。但是下载下来的nodejs的目录名又臭又长，怎么办？这里我们需要学好Linux。我给大家介绍一个简单的重命名文件/目录名的方法：
mvnode-v14.15.4-linux-x64nodejsmv 是用于移动文件的Linux 命令。当然，如果它们在同一个目录下，也可以用来重命名。
最后一步是配置nodejs全局环境。这里我们也使用linux命令ln。
ln -s/.更新后的你的nodejs所在目录/nodejs/bin/node/usr/local/bin/nodeln-s/.更新后的你的nodejs所在目录/nodejs/bin/npm/usr/local/bin/npm 允许我们通过软连接在全局环境中使用nodejs。
4. 通过命令行上传自己的网站到服务器
那么环境搭建好之后，我们就可以直接上传我们的网站代码了，因为我们选择的是centos服务器，它没有可视化界面来操作，而我的电脑是mac。这怎么能做到呢？不用担心，继续使用命令行！
我们可以使用命令行将文件或文件夹从本地上传到服务器，或者从服务器下载文件到本地计算机。这些操作无疑都要归功于scp。接下来我将演示如何从本地上传文件夹到服务器。
scp -r 本地文件夹路径root@你的公网IP:/上传的服务器路径#如scp-r./distroot@xxx.xxx.xxx:/website/其中-r 用于传输文件夹，如果是你想要的文件要上传包含文件夹，可以添加此标识符。
5. 网站部署和运维(负载均衡等)
网站可以使用nginx代理和负载均衡。互联网上也有很多信息。这里我给大家介绍一下pm2。
PM2是一个守护进程管理器，它将帮助我们管理并确保应用程序在线的稳定性。如果你是nodejs的忠实粉丝，那么它将是一个不错的选择。作为前端工程师，使用nodejs构建全栈网站也是非常有用的。一个有效的选择。
安装可以使用NPM 或Yarn 安装最新的PM2 版本：
$npminstallpm2@latest-g#or$yarnglobaladdpm2启动应用启动、守护和监视应用程序的最简单方法是使用以下命令行：
$pm2startapp.js 或轻松启动任何其他应用程序：
$pm2startbashscript.sh$pm2startpython-app.py--watch$pm2startbinary-file----port1520 我们可以传递给CLI 的一些选项：
#指定应用程序名称--name#当文件更改时监视并重新启动应用程序--watch#设置应用程序预加载的内存阈值--max-memory-restart200MB#指定日志文件--log#将额外参数传递给脚本--arg1arg2arg3#自动重新启动之间的延迟--restart-delay#Prefixlogswithtime--time#Donotautorestartapp--no-autorestart#指定cronforforcedrestart--cron#Attachtoapplicationlog--no-daemon 正如我们所看到的，有很多选项可用于使用PM2 管理我们的应用程序。目前H5-Dooring也是采用这种方式部署的，所以如果你有自己的网站，赶紧参考本教程进行部署吧~
OK，关于前端学习手册：一键将你的个人网站部署到线上和的内容到此结束了，希望对大家有所帮助。
本文采摘于网络，不代表本站立场，转载联系作者并注明出处：https://www.iotsj.com//kuaixun/8051.html
用户评论
终于找到学习前端部署的资源！一直想自己动手把网站放在线，希望这篇文章能帮我一步步搞明白。
有6位网友表示赞同！
我刚学了 HTML 和 CSS，想要尝试部署个简单页面看看效果，这篇文章应该很适合我吧。
有20位网友表示赞同！
以前只知道上传文件到空间就能看到自己的网站，原来还有服务器和外网的概念？太兴奋了！
有15位网友表示赞同！
文章标题听着就简单易懂，不用基础知识也能学会部署网站吗？期待看看具体步骤。
有17位网友表示赞同！
这篇文章刚好能解决我学习前端遇到的一个难题，现在好多教程都跳过部署的部分，直接说线上展示，不知道怎么操作啊
有9位网友表示赞同！
如果真的能轻松把网站部署到服务器，那简直太棒了！我的第一个网站快要大功告成啦。
有19位网友表示赞同！
我一直想弄清楚是怎么把网站放到外网的，这篇文章是不是会解释相关的技术？
有12位网友表示赞同！
听说部署站点的过程比较复杂，需要学习很多知识，希望这篇文章能让我快速入门。
有7位网友表示赞同！
我想要把自己的博客发布到网上，但是不知道怎么开始部署，这部文章能帮我吗？
有16位网友表示赞同！
以前听人说，自己搭建网站要付费去租服务器，这个说法对吗？这篇文章应该会解答这个问题吧。
有5位网友表示赞同！
学习前端的动力终于来了！有了这篇教程，我可以把自己创作的作品分享给更多人。
有20位网友表示赞同！
希望文章能够介绍一些免费的服务器部署方案，毕竟作为一个新手，预算有限呢。
有8位网友表示赞同！
我最近开始接触 web 开发，这篇文章正好可以帮助我更全面地了解前端开发流程。
有8位网友表示赞同！
之前用了一些在线平台搭建网站，但是想要更独立自主地控制自己的站点，应该从学习部署开始吧！
有12位网友表示赞同！
感觉自己离把网站上线越来越近了！看完这篇指南，我就能够实现自己想做的事情了。
有10位网友表示赞同！
这篇文章可能会涉及到一些比较专业的知识点，不过对于有兴趣的学习者来说很具有价值。
有19位网友表示赞同！
相信经过努力，我也能像文章一样轻松地把自己的网站部署到服务器上！
有10位网友表示赞同！
学习前端不仅要掌握代码，还要学会网站部署，这篇文章真是太棒了！
有20位网友表示赞同！