建站记录

December 12, 2019

本文主要是对搭建本项目的问题解决方案进行记录。

我选用的是阿里云的轻应用服务器，一次性买了一年，花了 120，大概 10 块一个月。非常超值，主要是因为阿里有学生优惠政策，建议每个学生都人手一台，真的买不了吃亏。

服务器-阿里云轻应用服务器

镜像：ubuntu-16.04 主要是在 mint，比较好上手。
cpu：单核没什么好吐槽的了，毕竟 9.9，就是没办法测试 cluster 性能。
内存：2G
硬盘：40G 不知道是不是 ssd，因为之前买 vultr，他家用的 ssd。
IP：120.79.157.195
域名：pakholeung.xyz 6 块全年，简直不要钱。
备案：还没有成功备案。

其实最主要的还是在技术方面的选型。

vue 虽然是前端框架，但是最后 build 出的仍然是静态文件，这点是不会变的。所以在服务器还是要架设静态文件服务上才能用。nginx 并不是我最开始的选择，我有更熟悉的 apache、或者是现在在使用的 node，都可以作为 web 服务。但是我最后还是选择用 nginx 了。听说 nginx 服务性能很好，能做很多事情，负载均衡，反向代理等，我觉得这是一个接触 nginx 比较好的机会。

关于 nginx 的配置

nginx 搭配向 vue 这种前端框架最大的问题应该是路由。就是当 vue、react 这类用上 virtual router 的时候，nginx 在处理 http 请求路径时并不会返回这些框架入口。例如 vue 入口应该是 index.html，在访问 http://xxx.xxx.xxx/ 时会正确返回 index.html 资源。但是访问http://xxx.xxx.xxx/xxx时并不会返回正确的资源。因为对于 nginx 来说这些静态资源不存在。所以有必要将全部的路径都配置到 index.html 上。

在vue 官方文档就有提及到使用 nginx 时需要的配置

location / {
  try_files $uri $uri/ /index.html;
}

目的同样是为了通配所有路径到 index.html 上。

令人意外的是在配置 nginx.conf(这个文件的绝对路径可以通过命令nginx -t得到)中，该代码不起作用。

http {
  #...
  include /etc/nginx/sites-enabled/*;
  server {
    listen 80;
    root /var/www/html/dist;
    location / {
      try_files $uri $uri/ /index.html;
    }
  }

}

原因是配置上头 include 语句导入了 default 配置。导致自定义配置不能生效，经检验无论在语句前配置还是后配置都不能覆盖该设置。只能注释掉。

api 服务器部分

在后台服务器其实用的就是 node 了，主要是不需要语言切换，比较方便。数据库用的 mongodb，在同一服务器上架设。这个数据库暂时没有设密，而且配置了任何主机都能访问，方便调试。

mongodb 的配置是根据这篇文章配置的。

另外为了稳定服务器的运行，使用了 pm2 来运行，可以如果程序崩溃会重启服务，另外还配置了热更新，方便代码同步时重启服务。整体 pm2 配置在 server 根目录的ecosystem.config.js文件中。

另外服务器中的 config 文件下的 config 和开发本地的 config 有些许不同，主要是静态资源路径的设置。切勿覆盖掉服务器的 config 文件。

vue 部分

你并不需要把整个 vue 项目同步到服务器中，只需要把 dist 目录同步到服务器上就可以了。另外 src/config 文件下同样有关于服务器环境和本地开发环境的差异的设置，这些设置主要是靠构建时的定义环境有关。当process.env.NODE_ENV === ‘production’时，为服务器配置。

Home

关于 nginx 的配置

api 服务器部分

vue 部分