云服务器建站 - Node & Nginx & MySQL

Create by jsliang on 2018-12-21 13:34:13
Recently revised in 2018-12-23 12:30:38

 Hello 小伙伴们，若是以为本文还不错，记得点个赞或者给个 star，大家的赞和 star 是我编写更多更精彩文章的动力！GitHub 地址

 【2019-08-16】Hello 小伙伴们，因为 jsliang 对文档库进行了重构，这篇文章的一些连接可能失效，而 jsliang 没有精力维护掘金这边的旧文章，对此深感抱歉。请须要获取最新文章的小伙伴，点击上面的 GitHub 地址，去文档库查看调整后的文章。

 本篇文章重点：

• 云服务器购买及使用
• 域名购买、备案及解析
• Nginx 配置多个二级域名及解析网页
• Node 服务端的部署及 MySQL 的安装

 最终效果：

目录	介绍
jsliang.top	jsliang 的网站列表
cv.jsliang.top	经过 ECharts + Vue 打造我的线上简历
playregex.jsliang.top	经过游戏来了解正则表达式
lucky.jsliang.top	清闲刮刮乐，仅供娱乐
deadline.jsliang.top	jsliang 的工做时间轴
webpack.jsliang.top	Webpack 学习成果，Webpack 多页面配置
game.jsliang.top	一个小游戏，只兼容 PC，适配移动端失败
company.jsliang.top	Node 打造企业网站，支持注册、登陆及留言
work.jsliang.top	jsliang 工做成果，给领导或者工做小伙伴查看

一 目录

 不折腾的前端，和咸鱼有什么区别

目录
一 目录
二 前言
三 云服务器及域名
3.1 云服务器
3.2 域名
四 Nginx 代理前端页面
五 MySQL 安装及部署
六 Node 提供接口服务
七 总结

二 前言

返回目录

 做为一枚程序猿，
 第一句编程必须是 Hello World!，
 第一个愿望必须是 My Blog，
 若是不是，当我没说。

 关于云服务器：
 做为一枚能 “折腾” (能做死) 的人，jsliang 玩过腾讯云服务器和阿里云服务器。

• 腾讯云服务器。若是你是大学生，那么腾讯云不可错过，[云+校园]学生云服务器体验套餐 10 元/月。这个活动，其实一开始的价格是 1元/月，1 年也就 12 元，一餐饭的价格都不到，jsliang 用了两年，直至 jsliang 毕业。后来，enm... 你知道的，变成了 10 元/月，腾讯云的意图我就不猜了，一年就是 120 元，云服务器配置是 1 核 2 G + 1 M带宽，对于初学者来讲，彻底够用了。
• 阿里云服务器。jsliang 目前正在使用的服务器就是云服务器。也许有的小伙伴们应该了解过云服务器，也知道在双 11 双 12 的时候，不只有疯狂的淘宝购物，还有阿里云服务器的推送，说不定小伙伴已经买了一台给本身了，可是一直没用上。

 若是小伙伴须要订购云服务器来存放像 jsliang 我的网站类的静态或者有 Node 后端的网页，但殊不知道怎么选择，能够加 jsliang QQ：1741020489 咨询，下面是一些优惠推广：

 腾讯云推广：

 新用户点这里：

• 新客户无门槛 2775 元代金券

  

 购买云服务器：

• 12 月优惠低至 168 元/年

  

 阿里云推广：

 新用户点这里：

• 新用户云产品 1888 通用代金券

  

 购买云服务器：

• 高性能云服务器 - 低至 293元/年

  

 购买企业级云服务器：

• 企业级高性能云服务器

  

三 云服务器及域名

返回目录

 云服务器和域名都是须要备案的：阿里云备案管理
 小伙伴能够经过上面连接了解下备案相关知识。

3.1 云服务器

返回目录

 若是你已经经过上面推送购买了云服务器，或者你自己就有云服务器，那么咱们开始讲解下 jsliang 对云服务器的使用：

 咱们了解下在哪里能够看到本身的云服务器：

1. 在阿里云首页点击控制台。

2. 点击左侧展开侧边栏，点击云服务器 ECS。

3. 点击实例，选择云服务器所在地区，便出现了本身买的云服务器实例。

 咱们须要记住有五大块：

• IP 地址。IP 地址 可让你经过 Win + R，输入 mstsc 后，在远程桌面中，经过输入公网地址以及密码，访问你的云服务器，方法详情。
• 远程链接。远程链接 能够直接经过网页的形式链接云服务器，对它进行操做。
• 实例状态。更多 -> 实例状态 能够中止、开启、重启云服务器。
• 磁盘和镜像。
  • 若是你感受 Windows 云服务器知足不了你了，或者你想更换 Windows 系统的其余版本，那么你能够经过 更多 -> 磁盘和镜像 -> 更换系统盘 来更换系统（请先在实例状态中中止云服务器）。方法详情
  • 若是你以为你的云服务器爆满了，想从新折腾过，那么能够经过 更多 -> 磁盘和镜像 -> 从新初始化磁盘 进行服务器的重置。方法详情
• 网路和安全组。点击 更多 -> 网路和安全组 -> 安全组配置 -> 配置规则 -> 添加安全组规则，从而添加 80 端口的安全组。方法详情

这里咱们讲解的是 Windows 系统对 Windows 云服务器的操做，由于 Windows 系统方便操做，因此有着其余系统的云服务器的小伙伴，能够考虑将云服务器改为 Windows 系统，或者百度、google 查找其余云服务器的部署方式。

 如今，咱们讲解了云服务器的基本操做，咱们暂且将云服务器这块内容先放一边，讲解下域名部分。

3.2 域名

返回目录

 在你使用域名以前，记得给域名备个案；阿里云备案管理
 若是你没有域名，可自行购买：万网域名注册

 如今咱们进入域名控制台：

 除了备案，其余的都不用理会了，咱们直接点击解析：

 上面的图片中显示的，都是 jsliang 在 jsliang.top 进行的解析记录。其中：

• 主机记录：二级域名开头，例如 company 对应的就是 http://company.jsliang.top 这个二级域名。
• 记录值：就是小伙伴云服务器的公网地址，在上面章节中提到过云服务器的 IP 地址。这是个很重要的玩意，请勿泄露。

 很好，如今咱们点击 添加记录：

 咱们只须要填上 主机记录 以及 记录值，而后点击 肯定 就能够完成一条二级域名的添加了。

下面会讲解到如何经过云服务器的 Nginx 配置，使二级域名导向服务器中的指定目录。

四 Nginx 代理前端页面

返回目录

为了保证小伙伴们尽量地实施顺利，jsliang 对本身的云服务器进行了 从新磁盘化磁盘 的操做，从而减小中间出篓子的可能。

 如今咱们开始配置 Nginx。
 首先，远程链接咱们的云服务器。操做方法

云服务器配置：
云服务器操做系统：Windows Server 2008 R2 企业版 64位中文版
开放端口：80、-一、2二、3389

 而后，咱们打开 C 盘，建立这几个目录：

• WebFrontEnd：存放前端文件位置
• WebBackEnd：存放后端文件位置
• Nginx：存放 Nginx 安装目录以及配置
• Node：存放 Node 安装位置
• MySQL：存放 MySQL 安装位置

 而后，咱们进行 Nginx 的安装及配置：

• Nginx 下载

因为云服务器浏览器时 IE，enm...因此咱们本地直接下载吧！
PS：可能这也是我为何用 Windows 的缘由，由于方便复制本机内容粘贴到云服务器上去。

 咱们下载稳定版本，即 nginx/Windows-1.42.2，它会弹窗让你下载 zip 包，咱们先在本机解压配置好，最后再复制到云服务器上的 Nginx 文件目录中。

 接着，咱们进行 Nginx 的配置解析，先在本地熟悉下目录。

 在这里，咱们要先了解到：Nginx/conf/nginx.conf 是咱们要修改的配置，而 vhost 是咱们要新建的目录，目录下就是咱们二级域名配置文件，例如 compony.jsliang.top 对应的就是 company_jsliang.conf 文件。

 而后，咱们打开文件 Nginx/conf/nginx.conf 进行配置，配置的文件已有注释，故这里再也不哆嗦：

Nginx/conf/nginx.conf

#user nobody;

# 跟 CPU 有关，不用修改
worker_processes 1;
events {
  # nginx 最大负载量
  worker_connections 1024;
}
http {
  
  # mime type 映射
  include mime.types;
  default_type application/octet-stream;
  
  # 启动高效传输文件的模式
  sendfile on;
  
  # 长链接 timeout
  keepalive_timeout 65;
  
  # http 结构下能够有多个 server。请求进来后，肯定哪个 server 由server_name 决定，这里咱们经过 include **文件 来进行多网址配置
  server {
    
    # 监听端口
    listen 80 default_server;
    
    # 识别的域名
    server_name localhost default_server;
    
    # 一个关键配置，与 URL 参数乱码问题有关
    #charset utf-8;
    root html;
    
    # 监听的文件
    location / {
      index index.html index.htm;
    }
    
    # 404页面
    # error_page 404 /404.html;
    # 重定向端口错误页面到50*.html页面
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
      root html;
    }
  }
  
  # 把其余 server 配置写到其余文件，方便管理
  include ../vhost/*.conf;
}
复制代码

 在上面，咱们经过最后一句话 include ../vhost/*.conf 能够知道，咱们将配置文件放到了 vhost 目录中，从而方便咱们下次新增二级域名。

 若是小伙伴但愿多了解点 Nginx 的知识，能够看下下面的文章。
 若是小伙伴们单纯就想快点部署完，请跳过这段话。

• Nginx 多域名配置
• worker_processes：进程数（1）
• worker_connections：最大负载量（1024）
• sendfile：启动高效传输文件的模式（on）
• keepalive_timeout：长链接（65）
• include：（mime.types）
• proxy_pass：要转发的地址（http://www.a.com:3000）

 再接着，咱们在 Nginx 目录下新建 vhost 目录，而后新增 company_jsliang.conf、work_jsliang.conf ……等目录，命名不重要，好记且它是 *.conf 就行。

*.conf

server {
  # 监听的端口，80 便可
  listen 80;
  
  # 监听的网址，这里填写你的网址，个人就有 company.jsliang.top 等……请确保该域名已经在阿里云、腾讯云、百度云等进行了域名解析。
  server_name company.jsliang.top;
  
  # 监听的目录
  root C:\WebFrontEnd\company;
  
  # 监听的文件
  location / {
    index index.html index.htm;
  }
}
复制代码

 看到这个，小伙伴们可能就明白了：当咱们访问 company.jsliang.top 时，Nginx 就会监听咱们在 C 盘下 C:\WebFrontEnd\company 目录下的 index 或者 index.html 或者 index.htm。
 当小伙伴们回想起咱们在域名解析时的操做时，会更加清晰：

• 域名解析到公网 IP -> Nginx 监听到了来自浏览器的请求 -> Nginx 查找关于这个请求的配置 -> Nginx 找到这个配置，发现应该定位到 ** 目录 -> Nginx 将信息返回给浏览器。

 配置完成后，咱们将文件复制并替换到云服务器上去。

记得在 WebFrontEnd 上存放你的前端网页文件喔，要否则最后运行 Nginx 你会发现好像没成功同样~

 再而后，咱们进入目录 C:\Windows\System32\drivers\etc，修改下 hosts 配置并保存：

hosts

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host

# localhost name resolution is handled within DNS itself.
# 127.0.0.1 localhost
# ::1 localhost

127.0.0.1  jsliang.top
127.0.0.1  company.jsliang.top
127.0.0.1  cv.jsliang.top
127.0.0.1  deadline.jsliang.top
127.0.0.1  game.jsliang.top
127.0.0.1  lucky.jsliang.top
127.0.0.1  playregex.top
127.0.0.1  webpack.jsliang.top
127.0.0.1  work.jsliang.top
复制代码

 最后，咱们再双击 Nginx 目录中的 nginx.exe，运行 Nginx。
 这时候，有的小伙伴可能发现有一个小框一闪而过，而后觉得没打开成功？别急，打开 Windows 任务管理器你会发现它已成功运行了。

若是小伙伴要新增一个二级域名，那就须要去 Windows 任务管理器将 Nginx 的两个进程结束，新增完毕后再重启 Nginx。

 这时候，咱们打开 company.jsliang.top 进行查看，发现它已成功部署啦：

 后记，附上我学习 Nginx 时的其余参考：

• Nginx中文文档
• Nginx 在 Windows 上安装及 Nginx 的配置及优化
• Nginx 基本配置与参数说明

五 MySQL 安装及部署

返回目录

 关于 MySQL 的安装，我在另外一篇文章中有记录：

• MySQL 的安装及配置

 如今，咱们直接在本地下载安装包，下载完后直接复制到云服务器上，按照教程一步一步配置便可。

六 Node 提供接口服务

返回目录

 首先，咱们下载 Node 的 msi 安装包，并复制到云服务器上：下载地址

 在这里要注意的是，咱们下载的是 64 位的 msi 安装包，由于在上面的 Nginx 配置的时候，咱们讲过咱们的云服务器是 Windows Server 2008 R2 企业版 64位中文版。

 咱们只须要一路 Next，在配置安装位置的时候，将位置放在咱们建好的 Node 目录中便可。

 而后，咱们经过 win + r -> cmd -> cd C:\WebBackEnd -> node -v 查看咱们的 Node 版本，jsliang 这里显示的是 v10.14.2，代表咱们安装成功了。。

 接着，咱们将咱们的 Node 代码复制到 WebBackEnd/NodeBase 目录中，同时控制台 cd 到这个目录：cd NodeBase，而后 npm i 安装依赖包，并 node index.js 从而开启项目。

 最后，由于咱们 Node 项目开启的是 8888 端口，因此咱们须要在云服务器的配置规则上配置好 8888 端口：方法详情

 至此，咱们的 Node 配置完毕并成功开启，若是小伙伴们想知道 Node 如何链接 MySQL、Node 如何使用、cnpm 以及 pm2 是什么，请查看 Node 基础。

记得 npm i 安装项目依赖包以及配置云服务器中相关的端口喔~

七 总结

返回目录

 通过一系列的折腾，咱们的云服务器终于配置完毕了，接下来就能够愉快玩耍啦~
 固然，若是小伙伴嫌本身配置麻烦，能够去阿里云的云服务器市场看看有没有装好的 Node + MySQL 环境喔~

 最后叨一句：须要购买云服务器的小伙伴能够咨询我 QQ 1741020489 哈~

jsliang 的文档库 由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.om/LiangJunron…上的做品创做。
本许可协议受权以外的使用权限能够从 creativecommons.org/licenses/by… 处得到。