【全栈】vue3.0 + golang 尝试前后端分离【博客系统1.1】有进展了

1 前期工作准备： 

1. 需要有一台独享ip的物理机，国内阿里云，国外也有；
2. 本地 vue+go可以跑通的一个完整的项目；（我也提供了完整的代码仓库）；
3. 有个可以全球访问的域名，有收费的也有免费的，前期一个就够用了；
4. 最好有个网站管理工具，国内免费的像宝塔类似的都可；
5. 反向代理服务器，可以部署在一个物理机上，宝塔面板有一键部署反向代理；
6. 物理机上安装 golang 、 nvm 、 npm 、 vue等等；

2 遇到的难点：（https 访问 http服务很难.... ）

       我只有一个物理机（一年360多好像，配置不高2C1G），一个域名https://ddyydy.tk, 如何go backend 和 vue frontend 项目一起使用呢？由于前段使用了https协议，则内部服务的交互协议也必须是https，所以可以使用同一个域名指定server的path访问路径，在nginx上实现服务的反向代理，原理如下如所以：

• 白色箭头为外部请求的流量；
• 绿色为vue前段项目的读写请求server的流量；
• 浅蓝色是服务端的返回数据流；

 这里贴下我的upstream配置：

server
{
    listen 80;
	listen 443 ssl http2;
    server_name ddyydy.tk;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/vue_project/ddyy/dist;
 
    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    ssl_certificate    /www/server/pane......pem;
    ssl_certificate_key    /www/server/p.....pem;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers EECDH+CH....5;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    add_header Strict-Transport-Security "max-age=31536000";
    error_page 497  https://$host$request_uri;
		#SSL-END
 
    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END
 
    #PHP-INFO-START  PHP引用配置，可以注释或修改
    include enable-php-00.conf;
    #PHP-INFO-END
 
    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/pa.....conf;
    #REWRITE-END
 
    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }
 
    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{
        allow all;
    }
 
    #禁止在证书验证目录放入敏感文件
    if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {
        return 403;
    }
 
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }
 
    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null;
    }
    location /ddyy-b/
    {
        proxy_pass http://ddyy-b/;
    }
    
    access_log  /www/wwwlogs/ddyydd.tk.log;
    error_log  /www/wwwlogs/ddyydd.tk.error.log;
}
upstream ddyy-b{
  server 144.188.23.88:3000;
}

重点是： location path 配置

location /ddyy-b/
    {
        proxy_pass http://ddyy-b/;
    }
 
upstream ddyy-b{
  server 144.188.23.88:3000;  // 对应后端的服务器ip+port
}

3. 最终效果

 

 

 

 

4.  后面计划

1. 后端存储接入mysql，做持久化存储
2. 功能丰富；
3. 交互设计，没有半点经验(哭了.jpg);

5. 源码

想参考源码的同学，请留言...