网站升级提示:我用react+go重构了网站并记录了部署项目简要步骤

先贴出来地址,这是我网站的地址易查网
可能有细心的小伙伴们已经看到了,原来我的网站是这样式的
妥妥的php+h5

改造

前端react框架

前段时间学习了react,正愁无处练手,就有人说我的网站很low,我感觉这正是一个好的机会,于是就计划升级一版。
首先是前端框架的筛选,如果从0开始搭建好像功能有点多,我就选择了一个基于react的框架biaochenxuying / blog-react,不过这个框架应该有点老了,react-route的新特性也没有,而且不兼容新版react-route。
相关打包命令npm run build

后端gin框架

后端使用了简单快捷的gin作为后端服务器提供了api接口
使用该命令生成二进制文件CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o main-go-linux app/main.go 感觉还是很方便的,不用服务器上再配置go环境,直接运行二进制文件即可

nginx

在nginx中指定了react build之后的文件目录,对于接口请求做了以下转发

指定接口转发

        location /api {rewrite ^/api(.*)$ $1 break;proxy_pass http://127.0.0.1:8012;}     

指定所有前端路由都走入口文件,要不然除了主页,其他路由都报404

location / {try_files $uri /index.html;
}

保证服务

为了保证服务的可用性,我使用了supervisor来守护进程。

成果

重构后的页面是长这样的
在这里插入图片描述
在这里插入图片描述

结语

自开自测,可能有想不到的问题,如果在使用过程中发现了什么问题,可以及时反馈给我哦!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/661226.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp + uView动态表单校验

项目需求&#xff1a;动态循环表单&#xff0c;并实现动态表单校验 页面&#xff1a; <u--form label-position"top" :model"tmForm" ref"tmForm" label-width"0px" :rulesrules><div v-for"(element, index) in tmForm…

洞察Agent AI智能体的未来:机遇与挑战并存

&#x1f512;文章目录&#xff1a; &#x1f6f4;什么是Agent AI智能体 &#x1f4a5;Agent AI智能体的技术组成 ☂️Agent AI智能体的应用场景 &#x1f4a3;Agent AI智能体的挑战与问题 &#x1f6b2; Agent AI智能体在未来社会中的角色和影响 ❤️对Agent AI智能体未来的期…

2024五一杯数学建模B题思路分析 - 未来新城背景下的交通需求规划与可达率问题

文章目录 1 赛题选题分析 2 解题思路详细的思路过程放在文档中 ! ! &#xff01;&#xff01;&#xff01;&#xff01;&#xff01;3 最新思路更新 1 赛题 B题 未来新城背景下的交通需求规划与可达率问题 随着城市化的持续发展&#xff0c;交通规划在新兴城市建设中显得尤为关…

【Linux】进程创建

思维导图 学习内容 在这一篇博客的主要内容是学习fork函数&#xff0c;了解fork函数的功能、返回值等。我们需要学会使用fork函数创建子进程。 学习目标 进程的概念fork函数的初始fork函数的返回值写时拷贝fork函数的常规用法fork函数调用失败的原因 零、进程的概念 进程&am…

【C++】封装哈希表 unordered_map和unordered_set容器

目录​​​​​​​ 一、unordered系列关联式容器 1、unordered_map 2、unordered_map的接口 3、unordered_set 二、哈希表的改造 三、哈希表的迭代器 1、const 迭代器 2、 operator 3、begin()/end() ​ 4、实现map[]运算符重载 四、封装 unordered_map 和 unordered_se…

Python+PYGObject/PYGtk+CSS样式--2024python示例

隔久点不用老是会忘&#xff0c;留个笔记。。 PythonPYGObject/PYGtk&#xff0c;加载 CSS 样式的演示代码 demo 运行的效果截图&#xff1a; #!/usr/bin/env python3 import sys import gigi.require_version("Gtk", "3.0") from gi.repository import …

C语言(操作符)1

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸各位能阅读我的文章&#xff0c;诚请评论指点&#xff0c;关注收藏&#xff0c;欢迎欢迎~~ &#x1f4a5;个人主页&#xff1a;小羊在奋斗 &#x1f4a5;所属专栏&#xff1a;C语言 本系列文章为个人学习笔记&#x…

基于SSM的志愿者管理系统(含源码+sql+视频导入教程+文档+PPT)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的志愿者管理系统3拥有三个角色&#xff1a; 管理员&#xff1a;用户管理、志愿组织管理、注册申请观看、活动管理、报名管理、打卡管理、公告管理等 用户&#xff1a;登录注册、…

动态规划-子序列问题2

文章目录 1. 最长定差子序列&#xff08;1218&#xff09;2. 最长的斐波那契子序列的长度&#xff08;873&#xff09;3. 最长等差数列&#xff08;1027&#xff09;4. 等差数列划分 II - 子序列&#xff08;446&#xff09; 1. 最长定差子序列&#xff08;1218&#xff09; 题…

制定语音芯片的语音识别指令时需要关注的内容

背景 最近定义设备识别的语音指令以及对应的语音反馈。虽然语音控制在软件里只是很小的一块功能&#xff0c;但也不能太马虎。新人入坑就要学习&#xff0c;学习前人的经验规避问题&#xff0c;最后总结经验给后人&#xff0c;给未来的自己。好记性不如烂笔头~ 下面一些问题是…

1天搞定uniApp+Vue3+vite+Element UI或者Element Plus开发学习,使用vite构建管理项目,HBuilderX做为开发者工具

我们通常给小程序或者app开发后台时&#xff0c;不可避免的要用到可视化的数据管理后台&#xff0c;而vue和Element是我们目前比较主流的开发管理后台的主流搭配。所以今天石头哥就带大家来一起学习下vue3和Element plus的开发。 准备工作 1&#xff0c;下载HBuilderX 开发者…

Ansys Speos|进行智能手机镜头杂散光分析

本例的目的是研究智能手机Camera系统的杂散光。杂散光是指光向相机传感器不需要的散光光或镜面光&#xff0c;是在光学设计中无意产生的&#xff0c;会降低相机系统的光学性能。 在本例中&#xff0c;光学透镜系统使用Ansys Zemax OpticStudio (ZOS)进行设计&#xff0c;并使用…