阿里云+Nuxtjs+SpringBoot——个人网站开发到上线全套资料整理

2020年更新：
域名及服务器过期，更新地址
目前效果：https://hongxh.cn/me/

---

前言

前段时间突然心血来潮想搭建了一个个人网站，就买了个云服务器开始折腾。其实单纯个人网站一个页面比较轻松，主要期间顺便把之前自己整的几个vue、react 的小项目也一起修修改改部署上去，还是忙乎了一会。

网站的页面和功能都比较简单，涉及的技术和技术难度都不大。不过涉及的技术点比较多，虽然网上很多教程，不过由于版本问题等还是遇到很多坑。再加上有四个网站需要一起部署。现在网站整的差不多，就把这段时间的积累整理下，方便自己查看及需要的朋友。

本篇就不像其他文章那样一步一步贴代码上来了，首先是太多了o(╥﹏╥)o，其次走过的这么多坑告诉我，项目中的问题，优先找官方，找文档，手把手的教程虽然好用，但是还是可能有很多问题。

目前实现：

• 前端 nuxt，pc端移动端都能正常访问， docker引用node镜像；
• 后端 spring-boot，swagger查看测试，docker引用自制jdk8镜像；
• gitlab 托管代码，安装 gitlab-runner，编写CI脚本， 实现自动化部署，创建运行对应docker镜像；
• 网站绑定域名，完成网站的备案；
• 安装ssl证书实现全站 https；
• 百度提交链接。

目前效果：在线查看

注：

1. 个人网站，本站没有木马，由于360申诉无果，如果打开页面存在360误报，点击继续访问即可
2. 由于使用https，站内其他项目链接访问可能弹出 “您的连接不是私密连接” ，依次点击 高级→继续访问 即可，有什么错误或者需要也可以直接联系我 O(∩_∩)O~

PC端：


移动端：

其他：

服务器

首先是服务器，这块也是遇坑最多，最难整的一部分。

乱七八糟的云里，选择了阿里云，配置这里就不细说了，我买的1核2G的。
由于公司采用gitlab托管代码，自动化部署到docker，个人觉得这套非常好，所以项目里就引进来了，首先尝试了自己搭建gitlab-ce服务器，然后由于云服务器配置问题放弃了。刚装上，linux命令都延迟，gitlab一会一个502，虽然能跑起来，但2G内存还是太少，最后选择了gitlab.com代替。

服务器相关资料整理：

• Linux教程 及 Linux命令学习 （常用命令，Vim，用户管理，Shell基础）

• gitlab-runner 的安装

• gitlab-runner 的注册

• runner-ci 脚本的使用

• 自动化构建的实现

• Mysql 的 yum 安装 和 使用 （数据库）

• jdk 的安装 ( yum list java* 查找安装)

• Maven 的安装 （官方下载解压 ，添加PATH）

• pm2 的 安装 和 使用 （Node.js应用程序的生产过程管理器）

• Node环境安装 （下载解压，添加PATH）

• Nginx 的下载

• Nginx 的安装

• Docker CentOs 安装

• Docker 官方文档

其他相关操作：

• 阿里云配置开发所需端口

• 域名注册 购买

• 网站备案 （麻烦）

• 域名增加隐性url （由于需要跳转到其他几个自己的项目，增加隐性url记录）

• ssl证书及Nginx上的安装

• 百度收录提交链接

• 加速百度网站收录

后端

然后是后端业务处理，需要实现评论新增、新增时邮件提示和评论列表两个接口，由于之前从事过后台开发，加上需求很简单，所以这部分相对轻松一些，如有需要，这部分的操作后续再整理。

• springboot 官方文档
• JPA 文档
• swagger2

其他相关操作：

• https的实现
• 阿里云关闭了发送邮件需要的25端口，需要采用465端口

前端

最后就是前端页面展示了，作为前端，这部分还是要思考下的。

1. 方案一：jquery
   这是最优解，网上模板很多，加上jq比较熟悉，下下来稍微修修改改，so easy。不过作为一个前端，怎么能这么草率，这样的网站是没有灵魂的。
2. 方案二：vue / reactjs
   vue 和 reactjs 应该是目前最火的两个框架了 ，不过spa的单页面虽然高效，不过还是有弊端，比如seo，而两者的 ssr 都比较麻烦，毕竟页面比较少，不想手动搭折磨自己。
3. 方案三：next / nuxt
   之前尝试开发了一个基于vue仿element的组件库，在个人网站里有，有兴趣也可以看看，也是由于对vue的熟练度大于react，所以选择了nuxt，还有，create-nuxt-app 在创建项目的时候就能帮你一次性搞定多个配置。另外，vuetify 还为你提供了很多模板，也就是说，还是简单改改页面，o(╥﹏╥)o，好吧。

前端相关资料整理：

• Nuxt.js 官方文档 — 基于 Vue.js 的通用应用框架
• Vuetify 官方文档 —基于 Vue.js 实现material风格的UI库
• Express 指南 — 基于 Node.js 平台，快速、开放、极简的 Web 开发框架
• Axios 指南 — 基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

其他相关操作：

• Material Design Icons （在vuetify中有相关说明，开箱即用）
• mate优化 （keyword 及 description 还有百度认证需要的 mate）
• 百度网站收录设置自动提交 （我做的处理是粘贴自动提交代码）