react+koa全栈开发 以及 部署流程

  1. 前端开发
  2. 后端开发
  3. 部署

前端开发

  1. 前端使用react、sass、TS、vite、pnpm进行开发,太详细的这里就不展开说了
  2. 项目创建可以参考我的另外一篇文章 优雅地创建一个前端项目

后端开发

  1. 后端使用node,使用koa框架进行开发,数据库我使用的是一个mysql的云数据库,但是大家只要能够连接上自己的数据库就行
  2. 后端开发详情参考我的另外一篇文章 koa基础配置

部署

服务器

  1. 我买了一个华为云服务器
  2. 但是你用什么服务器不重要,只要公网能访问就行
  3. 我服务器的配置是2G+2核+CentOS操作系统

XShell连接服务器

  1. 填写主机
  2. 填写账号密码

image.png
image.png

安装宝塔

  1. 登录宝塔
  2. 复制一下服务器操作系统对应的安装方法,我的是CentOS的,就复制了第一条
  3. 到XShell中粘贴运行一下,一键自动安装宝塔
  4. 安装好宝塔之后别急着关XShell,要记得记住自己的宝塔地址以及相应的账号密码这些

image.png

服务器安装软件

  1. 在宝塔的“软件商店”中安装node版本管理器、nginx

image.png

node安装

  1. 事先说一下,我使用的包管理是pnpm,而pnpm要求node版本至少16.14,并且我本地的node版本是16.14.0
  2. 使用node管理器下载了16.14.2版本的node,在这个版本的node里面下载了pnpm
  3. 注意:
    1. 如果你找不到16.14版本的node,可以更新版本列表”,这样大概就可以看见了
    2. node的版本尽量跟你本地开发的node版本差不多
  4. 坑:如果你安装了低版本的node,又想要使用pnpm,宝塔是不会给你报错的!!!

image.png

项目上线

  1. 将项目从本地移动到服务器上,我放在了www文件夹下面(要注意的是不要直接上传node_module文件夹,大概率你也上传不了)
  2. 在“网站”栏中添加node项目,进行相关信息的填写,等待下载依赖

image.png

  1. 如果依赖没下载成功可以事后自己再下载一下

image.png

nginx配置

  1. nginx配置,详情参考我的另外一篇文章 nginx配置过程

项目启动

  1. 项目启动可以在宝塔上面进行,也可以在XShell中进行
  2. 如果在宝塔上面没启动成功,可以检查一下自己的启动命令有没有错误,以及可以尝试在XShell中启动
  3. XShell中启动项目,首先要把node配置一下全局环境变量,可以参考一下这篇文章,大概就是找到root/etc/profile,然后添加你对应node的环境变量;然后node启动你的项目,看看有没有什么报错,解决一下,再启动

相关推荐

  1. 开发组合

    2023-12-28 18:30:04       49 阅读
  2. 开发工程师(第六天)

    2023-12-28 18:30:04       24 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-28 18:30:04       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-28 18:30:04       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-28 18:30:04       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-28 18:30:04       20 阅读

热门阅读

  1. React Hooks usestate源码示例

    2023-12-28 18:30:04       32 阅读
  2. Unity3D Shader在GPU上是如何执行的详解

    2023-12-28 18:30:04       43 阅读
  3. android studio导入module

    2023-12-28 18:30:04       37 阅读
  4. 跟着野火学FreeRTOS:第一段(任务延时列表)

    2023-12-28 18:30:04       34 阅读
  5. 学习笔记 k8s常用kubectl命令

    2023-12-28 18:30:04       30 阅读
  6. 加速 SQL 查询的 9 种方法

    2023-12-28 18:30:04       35 阅读
  7. Redis实现限流

    2023-12-28 18:30:04       39 阅读
  8. 统计商品各项数据sql&统计历史数据sql

    2023-12-28 18:30:04       43 阅读
  9. 【量化】商品期货换月的处理思路(old)

    2023-12-28 18:30:04       42 阅读
  10. 利用ChatGPT在不同教学场景中的应用

    2023-12-28 18:30:04       42 阅读
  11. 【Web2D/3D】Canvas(第三篇)

    2023-12-28 18:30:04       34 阅读
  12. 测试工程师年终总结

    2023-12-28 18:30:04       31 阅读