那些炫酷的 Web 网站是怎么搭建的？

{"value":"到很多小伙伴都拥有自己的网站，包括**学习网站，简历网站**呀，好生羡慕，那到底是怎么做的呢？今天西红柿就通过云服务器进行演示。\n \n 网站也分为静态网站 和动态网站两种。静态网站和动态网站的区别：\n 静态站点是最基本的网站类型，也是最容易创建的。 它不需要服务器端处理，只需要客户端。 客户端技术是 HTML，CSS 和 JavaScript。 简单来说，它不需要使用后端。 静态网站完全按照其存储方式提供给用户，这意味着页面上的任何内容都不会被用户甚至网站管理员更改，除非重新设计网站或网站管理员直接进入代码进行更改。\n \n### **个人建站能干嘛呢？**\n \n#### **1、个人简历**\n可能有新手朋友会问，现在个人简历不都是打印纸质版的吗？的确，用网站作为简历的虽然不为常见，但是如果你是从事互联网 IT 职业的，那么用网站作为简历可以大大提升个人逼格，同时与它人产生了差异化，这样不仅能够吸引面试官，而且还能给面试额外加分，毕竟不是每个人都能做出逼格网站。\n \n#### **2、自我营销**\n个人网站相比微博、知乎、朋友圈公众平台要畅所欲言，更能发现自己的真实想法，因为个人网站是完全属于自己的空间，不存在限制词，禁止言论等等，在营销方面也不需要成本。\n \n#### **3、生活纪实**\n对于喜欢写日志、记录生活的朋友，个人网站可以当作生活纪实的工具，好比我们的笔记本。个人网站能够更好的保存自己的文章，同时还可以插入图片，视频，通过优化后还可以让给网友们搜索看到。\n \n#### **4、商用服务**\n依靠网站卖货已成为主流，商家或个人可以在网站上发布自己的产品信息等，那么个人网站是再好不过的选择渠道。\n \n### **建站基础**\n \n- 1、服务器。本文使用的是亚马逊云。\n- 2、域名。域名要实名制和网站备案\n- 3、网站制作。\n **本文软件环境**：NodeJS、MySQL、Amazon CloudFront\n **本文开发环境**： Amazon （海外区域业务或个人使用，请注册“海外区域账户”；中国区域业务-需企业营业执照认证，请注册“中国区域账户”）\n \n### **什么是动态网站呢？**\n \n 动态网站并不是指具有动画功能的网站\n \n 动态网站具有这样两个典型特点：\n \n- 动态网站可以实现交互功能，如用户注册、信息发布、产品展示、订单管理等等；\n- 动态网页并不是独立存在于服务器的网页文件，而是浏览器发出请求时才反馈网页；\n 所以在本文中，我们也需要用到数据库，来实现动态网站的搭建，详细流程需要以下 5 个步骤：\n\n\n\n本文将围绕以下 5 个步骤进行详细演示 **云上高可用动态网站建站的全过程的全过程**，抓紧方向盘，我要发车了。\n\n#### **第一步-网络规划及安全设置**\nVPC 是私有的专有网络，您可以通过 VPC 自有规划网络配置 \n在 VPC 网络中,用户可以通过子网间的访问控制来实现对核心数据和业务服务器的访问控制,在确保核心数据安全可控的同时 满足公网的访问需求。\n \n1.1 创建 VPC\n 这里我们会利用 CloudFormation 模板，来快速创建教程所需要的 VPC 资源。\n\n\n\n 使用模板快速完成堆栈创建。稍等1-2分钟即可完成，但我们可以同时进行后续步骤。 \n\n\n\n#### **1.2 创建安全组**\n接下来，进入 EC2 控制台的安全组界面 ，点击创建安全组 。\n\n\n \n分别为 ELB，Bastion，AppServer 及 RDS 创建安全组，并添加入站规则，具体如下： \n- 安全组名称： SG-ALB-HA-Workshop\n- 描述： SG-ALB-HA-WorkshopVPC：\n- 选择新创建好的VPC\n- 协议：HTTP(80)\n- 来源：0.0.0.0/0\n\n\n\n### **第二步-创建数据库**\n打开 RDS 数据库控制台 . \n西红柿也提醒大家，千万不要把应用程序状态保存在自己的服务器上。 \n**一旦我们的服务器发生故障，那么应用程序状态很可能也随之彻底消失**。有鉴于此，应使用一套数据库存储数据。\n\n\n\n#### **2.1 创建数据库子网组**\n 子网组是对 VPC 子网的逻辑划分。我们在每个 VPC 中定义了很多子网。设置哪些子网作为供 RDS 使用的子网组。\n\n\n\n#### **2.2 新建数据库实例**\n 可以选择创建一个 RDS MySQL 5.7.31 的数据库实例，实例类型选择 db.t2.medium，并开启多可用区部署(创建备用实例)。\n\n\n\n### **第三步-创建 AppServer 模板**\n \n#### **3.1 服务器配置**\n 打开 EC2 控制台，并选择创建实例。\n 在 VPC 中创建一台 EC2，除了以下各项外，均使用默认设置。 \n- 操作系统：Ubuntu Server 18.04. 直接搜索 Ubuntu Server 18 或者 AMI ID: ami-0071f6f4df15863cc (北京); ami-0a22b8776bb32836b (宁夏)\n- 实例类型： t3.small\n- VPC：选择新创建的 VPC\n- 子网：任意选择一个公有子网\n- 安全组： SG-AppServer-HA-Workshop， SG-Bastion-HA-Workshop\n\n\n\n#### **3.2 安装软件及其依赖**\n Linux 系统无外网情况下安装复杂软件（需要很多依赖的软件），在云上，我们可以使用 wget 快捷下载并进行安装。\nCSS\n```\nsudo apt updatesudo apt install nodejs npm memcached -y# 下载并解压应用程序wget https://workshop-binc.s3.cn-northwest-1.amazonaws.com.cn/code/workshop_ha.tgztar -xf workshop_ha.tgzcd workshop_hanpm installsudo npm install -g sequelize-cli pm2\n```\n#### **3.3 数据库初始化**\n 修改配置文件~/workshop_ha/config/config.json\nRuby\n```\n \"development\": { ... \"host\": \"xxxxxx.xxxx.rds.cn-north-1.amazonaws.com.cn\", // 修改为数据库endpoint \"username\": \"your user name\", // 数据库用户名 \"password\": \"your password\", // 数据库密码 ... }\n```\n 执行如下命令创建 schema\nCSS\n```\nsequelize-cli db:createsequelize-cli db:migrate\n```\n#### **3.4 设置应用程序开机自启动** \n 设置应用程序开机自启动的目的在于， 集群重启时，服务自启动！\nApache\n```\npm2 startup>> 输出如下：>> sudo env PATH=$PATH:/usr/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup systemd -u ubuntu --hp /home/ubuntu# 执行输出的内容 sudo env PATH=$PATH:/usr/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup systemd -u ubuntu --hp /home/ubuntupm2 start app.jspm2 status # 确保状态为online\n```\n\n\n### **第四步-设置负载均衡及弹性伸缩**\n 负载均衡建立在现有网络结构之上，它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽、增加吞吐量、加强网络数据处理能力、提高网络的灵活性和可用性。\n 负载均衡（Load Balance）其意思就是分摊到多个操作单元上进行执行，例如 Web 服务器、FTP 服务器、企业关键应用服务器和其它关键任务服务器等，从而共同完成工作任务。\n \n#### **4.1 创建目标组**\n 打开目标组控制台，点击 创建目标组。\n\n\n\n#### **4.2 创建启动模板**\n 打开启动模板控制台 ，点击**创建启动模板**。\n\n\n\n#### **4.3 创建负载均衡器**\n 打开负载均衡器页面 ，点击**创建负载均衡器** 。\n\n\n\n### **第五步-配置 CloudFront 中心主题**\n 在实际生产环境中，建议使用 CloudFront 来加速内容的访问、降低流量成本并提高安全性。\n \n#### **5.1 创建 CloudFront**\n 只需要设置特殊标注的字段即可，其余设置可以保留默认值。其中，Forward Cookies 和 Query String Forwarding and Caching 可以根据自己的需要做调整。\n \n#### **5.2 添加域名解析记录**\n这一部分将我们网站的备用域名(CNAMEs)记录指向 CloudFront 分配的域名 xxxx.cloudfront.cn（中国区），xxx.cloudfront.net (海外区)。\n \n请注意：如果您是在海外区使用，且无需使用自定义域名，您可以直接通过 cloudfront 分配域名访问网站，而无需进行该步的配置；如果您是中国区使用，则需确保域名经过备案。\n \n \n### **说在最后**\n 随着信息技术的飞速发展，如今创建网站是一件非常容易的事情。通过云服务器(ECS)创建网站也越来简单高效、安全可靠、提供弹性伸缩的计算能力。除了商业用途，个人也可以进行分享知识 和 展示自我。\n 在管理运维方面，云服务器也比物理服务器更简单高效，同时云服务器拥有着较高的安全性和稳定性，无需提前购买硬件，中小企业和甚至个人用户也可快速创建网站。\n 以上就是 基于云服务器的典型 Web 动态网站部署全过程，是不是很简单呀？","render":"<p>到很多小伙伴都拥有自己的网站，包括<strong>学习网站，简历网站</strong>呀，好生羡慕，那到底是怎么做的呢？今天西红柿就通过云服务器进行演示。</p>\n<p>网站也分为静态网站 和动态网站两种。静态网站和动态网站的区别：<br />\n静态站点是最基本的网站类型，也是最容易创建的。 它不需要服务器端处理，只需要客户端。 客户端技术是 HTML，CSS 和 JavaScript。 简单来说，它不需要使用后端。 静态网站完全按照其存储方式提供给用户，这意味着页面上的任何内容都不会被用户甚至网站管理员更改，除非重新设计网站或网站管理员直接进入代码进行更改。</p>\n<h3><a id=\"_5\"></a><strong>个人建站能干嘛呢？</strong></h3>\n<h4><a id=\"1_7\"></a><strong>1、个人简历</strong></h4>\n<p>可能有新手朋友会问，现在个人简历不都是打印纸质版的吗？的确，用网站作为简历的虽然不为常见，但是如果你是从事互联网 IT 职业的，那么用网站作为简历可以大大提升个人逼格，同时与它人产生了差异化，这样不仅能够吸引面试官，而且还能给面试额外加分，毕竟不是每个人都能做出逼格网站。</p>\n<h4><a id=\"2_10\"></a><strong>2、自我营销</strong></h4>\n<p>个人网站相比微博、知乎、朋友圈公众平台要畅所欲言，更能发现自己的真实想法，因为个人网站是完全属于自己的空间，不存在限制词，禁止言论等等，在营销方面也不需要成本。</p>\n<h4><a id=\"3_13\"></a><strong>3、生活纪实</strong></h4>\n<p>对于喜欢写日志、记录生活的朋友，个人网站可以当作生活纪实的工具，好比我们的笔记本。个人网站能够更好的保存自己的文章，同时还可以插入图片，视频，通过优化后还可以让给网友们搜索看到。</p>\n<h4><a id=\"4_16\"></a><strong>4、商用服务</strong></h4>\n<p>依靠网站卖货已成为主流，商家或个人可以在网站上发布自己的产品信息等，那么个人网站是再好不过的选择渠道。</p>\n<h3><a id=\"_19\"></a><strong>建站基础</strong></h3>\n<ul>\n<li>1、服务器。本文使用的是亚马逊云。</li>\n<li>2、域名。域名要实名制和网站备案</li>\n<li>3、网站制作。<br />\n<strong>本文软件环境</strong>：NodeJS、MySQL、Amazon CloudFront<br />\n<strong>本文开发环境</strong>： Amazon （海外区域业务或个人使用，请注册“海外区域账户”；中国区域业务-需企业营业执照认证，请注册“中国区域账户”）</li>\n</ul>\n<h3><a id=\"_27\"></a><strong>什么是动态网站呢？</strong></h3>\n<p>动态网站并不是指具有动画功能的网站</p>\n<p>动态网站具有这样两个典型特点：</p>\n<ul>\n<li>动态网站可以实现交互功能，如用户注册、信息发布、产品展示、订单管理等等；</li>\n<li>动态网页并不是独立存在于服务器的网页文件，而是浏览器发出请求时才反馈网页；<br />\n所以在本文中，我们也需要用到数据库，来实现动态网站的搭建，详细流程需要以下 5 个步骤：</li>\n</ul>\n<p><img src=\"https://dev-media.amazoncloud.cn/c4fd996c57514a9eafea6c31b9bb1c47_image.png\" alt=\"image.png\" /></p>\n<p>本文将围绕以下 5 个步骤进行详细演示 <strong>云上高可用动态网站建站的全过程的全过程</strong>，抓紧方向盘，我要发车了。</p>\n<h4><a id=\"_41\"></a><strong>第一步-网络规划及安全设置</strong></h4>\n<p>VPC 是私有的专有网络，您可以通过 VPC 自有规划网络配置<br />\n在 VPC 网络中,用户可以通过子网间的访问控制来实现对核心数据和业务服务器的访问控制,在确保核心数据安全可控的同时 满足公网的访问需求。</p>\n<p>1.1 创建 VPC<br />\n这里我们会利用 CloudFormation 模板，来快速创建教程所需要的 VPC 资源。</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/417de3c8c2934ff68c4bce02fd590fd5_image.png\" alt=\"image.png\" /></p>\n<p>使用模板快速完成堆栈创建。稍等1-2分钟即可完成，但我们可以同时进行后续步骤。</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/909472b74ea74e4ea23311efb1e18517_image.png\" alt=\"image.png\" /></p>\n<h4><a id=\"12__54\"></a><strong>1.2 创建安全组</strong></h4>\n<p>接下来，进入 EC2 控制台的安全组界面 ，点击创建安全组 。</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/368e5f4263c243f9b714b495f5a11116_image.png\" alt=\"image.png\" /></p>\n<p>分别为 ELB，Bastion，AppServer 及 RDS 创建安全组，并添加入站规则，具体如下：</p>\n<ul>\n<li>安全组名称： SG-ALB-HA-Workshop</li>\n<li>描述： SG-ALB-HA-WorkshopVPC：</li>\n<li>选择新创建好的VPC</li>\n<li>协议：HTTP(80)</li>\n<li>来源：0.0.0.0/0</li>\n</ul>\n<p><img src=\"https://dev-media.amazoncloud.cn/acbb0000edc846ed8b04af008ef97473_image.png\" alt=\"image.png\" /></p>\n<h3><a id=\"_68\"></a><strong>第二步-创建数据库</strong></h3>\n<p>打开 RDS 数据库控制台 .<br />\n西红柿也提醒大家，千万不要把应用程序状态保存在自己的服务器上。<br />\n<strong>一旦我们的服务器发生故障，那么应用程序状态很可能也随之彻底消失</strong>。有鉴于此，应使用一套数据库存储数据。</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/c5e21643e9294883a1d0f3b724706621_image.png\" alt=\"image.png\" /></p>\n<h4><a id=\"21__75\"></a><strong>2.1 创建数据库子网组</strong></h4>\n<p>子网组是对 VPC 子网的逻辑划分。我们在每个 VPC 中定义了很多子网。设置哪些子网作为供 RDS 使用的子网组。</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/1a63c09524a74d0b9f82c0ba711d2263_image.png\" alt=\"image.png\" /></p>\n<h4><a id=\"22__80\"></a><strong>2.2 新建数据库实例</strong></h4>\n<p>可以选择创建一个 RDS MySQL 5.7.31 的数据库实例，实例类型选择 db.t2.medium，并开启多可用区部署(创建备用实例)。</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/d82fceecfb004106a13566d9c74305a6_image.png\" alt=\"image.png\" /></p>\n<h3><a id=\"_AppServer__85\"></a><strong>第三步-创建 AppServer 模板</strong></h3>\n<h4><a id=\"31__87\"></a><strong>3.1 服务器配置</strong></h4>\n<p>打开 EC2 控制台，并选择创建实例。<br />\n在 VPC 中创建一台 EC2，除了以下各项外，均使用默认设置。</p>\n<ul>\n<li>操作系统：Ubuntu Server 18.04. 直接搜索 Ubuntu Server 18 或者 AMI ID: ami-0071f6f4df15863cc (北京); ami-0a22b8776bb32836b (宁夏)</li>\n<li>实例类型： t3.small</li>\n<li>VPC：选择新创建的 VPC</li>\n<li>子网：任意选择一个公有子网</li>\n<li>安全组： SG-AppServer-HA-Workshop， SG-Bastion-HA-Workshop</li>\n</ul>\n<p><img src=\"https://dev-media.amazoncloud.cn/8fcc01381da94021a7b7af82bdf860e5_image.png\" alt=\"image.png\" /></p>\n<h4><a id=\"32__98\"></a><strong>3.2 安装软件及其依赖</strong></h4>\n<p>Linux 系统无外网情况下安装复杂软件（需要很多依赖的软件），在云上，我们可以使用 wget 快捷下载并进行安装。<br />\nCSS</p>\n<pre><code class=\"lang-\">sudo apt updatesudo apt install nodejs npm memcached -y# 下载并解压应用程序wget https://workshop-binc.s3.cn-northwest-1.amazonaws.com.cn/code/workshop_ha.tgztar -xf workshop_ha.tgzcd workshop_hanpm installsudo npm install -g sequelize-cli pm2\n</code></pre>\n<h4><a id=\"33__104\"></a><strong>3.3 数据库初始化</strong></h4>\n<p>修改配置文件~/workshop_ha/config/config.json<br />\nRuby</p>\n<pre><code class=\"lang-\"> &quot;development&quot;: { ... &quot;host&quot;: &quot;xxxxxx.xxxx.rds.cn-north-1.amazonaws.com.cn&quot;, // 修改为数据库endpoint &quot;username&quot;: &quot;your user name&quot;, // 数据库用户名 &quot;password&quot;: &quot;your password&quot;, // 数据库密码 ... }\n</code></pre>\n<p>执行如下命令创建 schema<br />\nCSS</p>\n<pre><code class=\"lang-\">sequelize-cli db:createsequelize-cli db:migrate\n</code></pre>\n<h4><a id=\"34__115\"></a><strong>3.4 设置应用程序开机自启动</strong></h4>\n<p>设置应用程序开机自启动的目的在于， 集群重启时，服务自启动！<br />\nApache</p>\n<pre><code class=\"lang-\">pm2 startup&gt;&gt; 输出如下：&gt;&gt; sudo env PATH=$PATH:/usr/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup systemd -u ubuntu --hp /home/ubuntu# 执行输出的内容 sudo env PATH=$PATH:/usr/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup systemd -u ubuntu --hp /home/ubuntupm2 start app.jspm2 status # 确保状态为online\n</code></pre>\n<p><img src=\"https://dev-media.amazoncloud.cn/05c2f16ccba44d648a8d79984be7d33d_image.png\" alt=\"image.png\" /></p>\n<h3><a id=\"_123\"></a><strong>第四步-设置负载均衡及弹性伸缩</strong></h3>\n<p>负载均衡建立在现有网络结构之上，它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽、增加吞吐量、加强网络数据处理能力、提高网络的灵活性和可用性。<br />\n负载均衡（Load Balance）其意思就是分摊到多个操作单元上进行执行，例如 Web 服务器、FTP 服务器、企业关键应用服务器和其它关键任务服务器等，从而共同完成工作任务。</p>\n<h4><a id=\"41__127\"></a><strong>4.1 创建目标组</strong></h4>\n<p>打开目标组控制台，点击 创建目标组。</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/1565751cd8f4469faf89857988aa75a3_image.png\" alt=\"image.png\" /></p>\n<h4><a id=\"42__132\"></a><strong>4.2 创建启动模板</strong></h4>\n<p>打开启动模板控制台 ，点击<strong>创建启动模板</strong>。</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/dea2103ff1be48dbbf3ac297c7518115_image.png\" alt=\"image.png\" /></p>\n<h4><a id=\"43__137\"></a><strong>4.3 创建负载均衡器</strong></h4>\n<p>打开负载均衡器页面 ，点击<strong>创建负载均衡器</strong> 。</p>\n<p><img src=\"https://dev-media.amazoncloud.cn/bd9a0fbf792c4ac296eb92c0b47fabd0_image.png\" alt=\"image.png\" /></p>\n<h3><a id=\"_CloudFront__142\"></a><strong>第五步-配置 CloudFront 中心主题</strong></h3>\n<p>在实际生产环境中，建议使用 CloudFront 来加速内容的访问、降低流量成本并提高安全性。</p>\n<h4><a id=\"51__CloudFront_145\"></a><strong>5.1 创建 CloudFront</strong></h4>\n<p>只需要设置特殊标注的字段即可，其余设置可以保留默认值。其中，Forward Cookies 和 Query String Forwarding and Caching 可以根据自己的需要做调整。</p>\n<h4><a id=\"52__148\"></a><strong>5.2 添加域名解析记录</strong></h4>\n<p>这一部分将我们网站的备用域名(CNAMEs)记录指向 CloudFront 分配的域名 xxxx.cloudfront.cn（中国区），xxx.cloudfront.net (海外区)。</p>\n<p>请注意：如果您是在海外区使用，且无需使用自定义域名，您可以直接通过 cloudfront 分配域名访问网站，而无需进行该步的配置；如果您是中国区使用，则需确保域名经过备案。</p>\n<h3><a id=\"_154\"></a><strong>说在最后</strong></h3>\n<p>随着信息技术的飞速发展，如今创建网站是一件非常容易的事情。通过云服务器(ECS)创建网站也越来简单高效、安全可靠、提供弹性伸缩的计算能力。除了商业用途，个人也可以进行分享知识 和 展示自我。<br />\n在管理运维方面，云服务器也比物理服务器更简单高效，同时云服务器拥有着较高的安全性和稳定性，无需提前购买硬件，中小企业和甚至个人用户也可快速创建网站。<br />\n以上就是 基于云服务器的典型 Web 动态网站部署全过程，是不是很简单呀？</p>\n"}