1、背景

技术中通常说一个深度和广度，“T”字型，横代表广度，竖代表深度；深度让我们稳稳扎根，广度让我们打通整个链路看到全局，形成合力，比如你要做个副业之类的广度是必须的。最近通过一个博客系统部署到阿里云，（Go+Vue+Docker+阿里云），初步完成前端到后台的入门。

image.png

image.png

2、基础工作

这是前端后台的一些基本工作，完成这一步才能继续进军常用的一些框架，这里服务端采用的技术栈是Go，前端是Vue

Go

主要是学习一些Go的基础知识以及Go Web编程的入门知识

知乎入门讲解
Go 入门指南
Go语言圣经
Go 语言设计与实现
Go web 编程

Go的框架也比较多，各个不同可以参考一下 这篇文档，目前比较流行的是Gin

前端

采用的是上手简单的Vue之前，前端这块之前有点基础，没有花费太多时间，主要是温习了一下如何画UI
你需掌握的CSS知识都在这了
30 分钟学会 Flex 布局

UI框架目前有2个

  • AntDesign 支持到Vue 最新的3.x

蚂蚁金服出的

  • Vuetify 国外的框架，完全遵守material design风格，但是目前只支持到2.x，（vuetify对css做了重置，写起来非常简练，缩写可以查看vuetify.css和vuetify.min.css两个样式类）

3、项目学习

有了前面一些基础之后，就需要通过项目来实战学习，查漏补缺，这里选用了一个博客项目，这个好处就是这个老哥还录制了一些视频 地址如下：https://segmentfault.com/a/1190000039272771，这个项目大概30+api，内容比较丰富，然后就是跟着git记录，慢慢消化整个项目工程，这个过程不能贪快，其中一些过程还去请教了服务端同学才能搞清楚

  • ApiPost (比postman更好用的后端接口调试工具)
  • Mysql数据库的一些基本概念和操作
  • Gorm (go的数据库访问框架)
  • JWT （json web token，token认证）
  • Cors 解决跨域问题
  • 多模板加载 multitemplate
  • vue 打包
  • axios封装使用
  • chrome调试项目
  • docker (非常流行的轻量级容器化技术，主要可以用来讲环境的差异屏蔽，提供直接交付的镜像产物)
  • nginx 着重理解下“反向代理”

4、部署到阿里云

这里需要掌握以下基础技能

  • nginx 配置
  • docker

这块就是自己的进一步探索了，先上个示意图

image.png

购买阿里云服务器以及域名

http://www.geekidxu.tech/
我买的是1年的，域名+服务端不到200，纯粹学习用，选择的Ubuntu主机，云主机上按装上常用的软件 nginx之类的

备案

这个按照步骤走就好

配置域名DNS解析

在 云解析DNS中配置域名到ip的映射
image.png

防火墙端口开放

控制台-资源管理-ECS 安全组 中设置
image.png
这样域名就能解析到nginx服务了，需要在云主机上配置好nginx
/etc/nginx/sites-enabled/default文件中配置

1
2
3
4
5
6
7
8
9
10
server {
  listen 80;
  server_name www.geekid.tech;

  location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;  
    proxy_pass http://112.74.93.12:3000;
  }
}

阿里云docker镜像

工作台 搜索 容器镜像服务，创建自己的镜像仓库，然后将自己的项目打包成docker 镜像，（需要在mac上安装docker服务，搜下dockerhub）

1
2
3
4
//打包
docker build -t registry.cn-shenzhen.aliyuncs.com/xsfdev/blog:0.2 .
//推送
docker push registry.cn-shenzhen.aliyuncs.com/xsfdev/blog:0.2

此时阿里云的镜像仓库就有我们打包好镜像，
在阿里云主机安装Portainer.io 这个好用的DockerGUI工具，固定是 ip:9000端口访问
image.png
配置mysql 容器时候需要注意，这里涉及到volumes概念，因为docker重启会清除数据，docker提供volums的概念，这个数据不会随着重启而消失，然后api就是项目的stacks配置
image.png

5、小结

本文只是将这段时间以来业余时间学习的玩意做了一个整体的概述，这里面涉及到的知识体系十分庞大，点到为止，感兴趣的找个自己的切入点。初步窥探了全栈的一些门道，服务端选择的是Go，因为Go目前比较火而且执行效率上看确实比Java好太多，是个比较有竞争力的语言；前端的话入门vue比较适合个人开发者，react比较重了些。通过扩展广度，可以更加清晰的了解整个链路的工作原理，也可以让自己的技术体系更加完备形成合力，不过这里的门道很多，需要日后慢慢消化。

TODO

  • https的配置
  • 其他前后端一体的项目
  • 深入go
  • nginx、redius