做了一个很简陋的项目,所用的技术细节很简单,主要是梳理下全找开发的流程。
- 一个在线留言板
- 乞丐版的全栈开发
服务器在美国,国内第一次访问可能有点慢
技术点
-
前后端分离,通过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 就可看到结果了。
宣传
独乐乐不如众乐乐,写完一个项目,当然写个博客,和大家交流经验啦。