当前位置: 首页 > news >正文

【全栈】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. 源码

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

相关文章:

  • Chapter9:Simulink建模与仿真
  • 【Python Web】Flask框架(八)前端基础整合
  • MYSQL的安装及环境配置
  • Qt的QChartView实现缩放和放大功能
  • 2022 IDC中国未来企业大奖优秀奖颁布,华为云数据库助力德邦快递获奖
  • 计算机网络(二) | 网络编程基础、Socket套接字、UDP和TCP套接字编程)
  • 如何将代码写的更加优雅?
  • Docker网络模式
  • 无人机群编队分析的定位问题 分析与思考-1(数学建模竞赛2022年B题)
  • EFLK日志收集
  • 简单聊聊羊了个羊
  • 微服务 Spring Boot 整合Redis 实现优惠卷秒杀 一人一单
  • 【数据结构与算法】顺序表的定义及初步实现
  • 线稿图视频制作--从此短视频平台不缺上传视频了
  • 爬虫工具之Beautiful Soup学习
  • [LeetCode] Wiggle Sort
  • 《网管员必读——网络组建》(第2版)电子课件下载
  • 【前端学习】-粗谈选择器
  • Angular6错误 Service: No provider for Renderer2
  • AzureCon上微软宣布了哪些容器相关的重磅消息
  • bearychat的java client
  • JavaScript实现分页效果
  • JavaWeb(学习笔记二)
  • Service Worker
  • spring + angular 实现导出excel
  • SQLServer之创建显式事务
  • 百度小程序遇到的问题
  • 测试开发系类之接口自动化测试
  • 计算机在识别图像时“看到”了什么?
  • 每个JavaScript开发人员应阅读的书【1】 - JavaScript: The Good Parts
  • 七牛云 DV OV EV SSL 证书上线,限时折扣低至 6.75 折!
  • 如何在 Tornado 中实现 Middleware
  • 入职第二天:使用koa搭建node server是种怎样的体验
  • 数据科学 第 3 章 11 字符串处理
  • 怎么将电脑中的声音录制成WAV格式
  • 交换综合实验一
  • ​​​【收录 Hello 算法】9.4 小结
  • ​html.parser --- 简单的 HTML 和 XHTML 解析器​
  • ​VRRP 虚拟路由冗余协议(华为)
  • $.ajax()方法详解
  • (003)SlickEdit Unity的补全
  • (3)STL算法之搜索
  • (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例
  • (附源码)ssm基于微信小程序的疫苗管理系统 毕业设计 092354
  • (三)模仿学习-Action数据的模仿
  • (十二)springboot实战——SSE服务推送事件案例实现
  • (转)VC++中ondraw在什么时候调用的
  • ***linux下安装xampp,XAMPP目录结构(阿里云安装xampp)
  • **《Linux/Unix系统编程手册》读书笔记24章**
  • .form文件_一篇文章学会文件上传
  • .net core 的缓存方案
  • .NET Core工程编译事件$(TargetDir)变量为空引发的思考
  • .NET LINQ 通常分 Syntax Query 和Syntax Method
  • .NET MVC、 WebAPI、 WebService【ws】、NVVM、WCF、Remoting
  • .NET 将混合了多个不同平台(Windows Mac Linux)的文件 目录的路径格式化成同一个平台下的路径