做了一个很简陋的项目，所用的技术细节很简单，主要是梳理下全找开发的流程。

一个在线留言板
乞丐版的全栈开发

项目在线地址

服务器在美国，国内第一次访问可能有点慢

技术点

前后端分离，通过REST API接口进行联系
MySQL数据表的设计，常用的SQL语句
前端： Vue + Antd + axiso
后端：Spring Boot + MyBatis
运维：托管在DigitalOcean，使用Docker容器管理应用
使用nginx部署多个域名服务，lets encrypt进行https加密

项目很简陋，所用到的技术点都是入门级的。如果有同学希望了解全栈开发的话，可以来交流一下。

开发流程

我觉得比较合适的开发流程是

设计数据的库表结构

先把数据库设计好，很多看似复杂的业务逻辑就会显得很清晰了
根据REST规范，制定前后端的接口API

接口自定好，就可以统一前后端的开发，制定过程中，大家基本就能掌握业务逻辑
上面两个规范写好，前后端就可以同时开发了
开发完成后交给运维人员，发布上线

内容

数据库

这个留言板主要有两个内容

留言信息
用户

具体的字段

messages: table name.
- id: 每个message都应该有个ID，它应该是自动增长的，可以由数据库来创建
- content: 留言的具体内容，500个字符足够了
- username: 用户名，应该和用户表对应
- create_datetime: 创建时间，可以有数据库自动生成
- update_datetime: 最近一次编辑时间
users: 存储用户信息
- username
- password
- token：在用户第一次登陆后，我们可以给他生成一个随机字符串用来做后续的验证。token的权限一般要小于用户名 + 密码。

常用的SQL以及我放在了github

REST API

关于REST API规范本身网上已经说了很多了，我这里重点说一下文档规范。一个好的API规范不仅要本身设计的好，文档的格式也很重要。

文档风格

标题

内容一
内容二

细节

关于这个API调用的一些细节

URL

对应的url (只使用path, 不包括root url)

查询字符串

可以添加哪些查询字符串

Header

有哪些合法的请求头字段

Body

请求正文的内容

Response

响应报文

Response Status
复制代码

Response Headers
复制代码

Response Body
复制代码

具体实现的细节，可以再我的github中找到。

前端后端代码开发

前端的在这里
后端的在这里

项目的详细分析比较繁琐，这里就直接跳过了，如果有人看的话我再来写。。

上线

我们部署一个网站，大概需要这些流程

购买域名
购买云主机
将域名DNS解析到云主机的IP地址
在云主机上部署数据库，后端应用
将前端资源上传到服务器，通过nginx之类的web服务器托管
为了安全，可能还要使用https加密

云主机

我使用的是Digital Ocean 的云主机，主要是基于下面的原因

境内的云主机访问速度可能比较快，但是需要备案。。太麻烦了
AWS ，Google Cloud 需要欧美的信用卡，我没有

而Digital Ocean 不需要备案，可以使用PayPal支付，而且本身体量比较大，值得信赖。

我目前是使用的 1GB内存，5$/month。用了一年多，感觉很稳定。

域名

这里可以直接在国内的几个厂家买。

购买完成后我们可以给我们的域名添加A记录，指向我们的服务器地址。

当我们购买一个域名后，我们可以给它添加任意多个子域名
一个域名可以对应多个IP地址
一个IP地址可以对应多个域名
一台服务器上可以部署多个网站，只要流量不是太大就行

部署应用

这是使用docker部署数据库的文章 docker-mysql

部署前端静态资源

这里我使用的是nginx

上传静态资源到服务器

因为nginx安全限制，你上传的文件应该放在 /var/www 目录比如我放在了 /var/www/MessageBoardVue 这个目录下
在nginx的配置文件中添加这样的字段


server {
  listen 80;
  server_name mb.bitfish.xyz;
  location / {
    root /var/www/MessageBoardVue;
    index index.html ;
 }
}
复制代码

server.listen = 80就是告诉nginx：给我监听80端口。

但是之前说过，一台服务器上可以部署多个网站，假如我部署了 examA.com 和 examB.com，它们都指向142.93.12.228这个服务器，服务器如何区分呢？

其实浏览器发起每个http请求，都会在请求头上添加一个Host字段

server.server_name = mb.bitfish.xyz 就是告诉服务器所有前往http://mb.bitfish.xyz的流量有这个配置文件来管理。然后如果我们把我们的静态资源放在 /var/www/MessageBoardVue 这个目录下，重启nginx服务nginx -s reload 之后，应该就可以再http://mb.bitfish.xyz上看到我们的静态资源服务。

https 证书

有了lets encrtpt 之后，给网站添加https加密如此的简单。

在官网上下载 CertBot，官方教程很详细，我就不赘述了

$ sudo certbot --nginx
复制代码

这一步后certbot会检查本地的nginx配置文件，自动的帮你寻找你在这台服务器上部署的域名，大概是这样的


Which names would you like to activate HTTPS for?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: mb.bitfish.xyz
2: api.mb.bitfish.xyz
3: music.static.bitfish.xyz
4: travel.bitfish.xyz
复制代码

然后我们选择一个，傻瓜操作就行了。

注意的是，let encrypt 是通过验证当前服务器IP是否为该域名DNS解析的结果来判断你是不是合法用户的也就是说

假设你的域名的DNS 结果是 124.233.233.233
那么必须在这台服务上使用lets encrypt,这样lets encrypt才能知道你是不是改域名的真正的拥有者

上述操作完成后，certbot就会给我们生成证书，并且智能的帮我们修改配置文件

server {
  listen 80;
  server_name mb.bitfish.xyz;
  location / {
    root /var/www/MessageBoardVue;
    index index.html ;
 }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/mb.bitfish.xyz/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/mb.bitfish.xyz/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}
复制代码

可以看到，我们的证书已近生成并被正确的配置到合适的位置. 接下来访问 mb.bitfish.xyz 就可看到结果了。

宣传

独乐乐不如众乐乐，写完一个项目，当然写个博客，和大家交流经验啦。

乞丐版的全栈实践

技术点