react + koa2 +mongodb项目 + 腾讯云服务器 windows系统打包部署上线完整(图文)攻略

news/2024/6/30 6:39:50

项目打包部署上线

        • 项目gitee地址
        • 打包部署相关工具介绍
          • 服务器
          • 连接服务器工具
          • 服务器系统
          • 打包工具
          • 其他工具
        • 流程介绍
          • 连接服务器
          • 打包前端项目
          • nginx服务器
          • mongodb安装和使用
          • 安装nvm及配置
          • 后端项目部署
          • 启动线上项目

项目gitee地址

  • https://gitee.com/guozia007/cuckoo

打包部署相关工具介绍

服务器
  • 腾讯云 - 轻量应用服务器(主要是便宜)
连接服务器工具
  • window系统里的远程桌面连接功能
服务器系统
  • windows系统
打包工具
  • 前端react项目打包用自带webpack进行打包
  • 本次后端和数据库未打包,直接放在服务器上的
其他工具
  • nginx 服务器
  • nvm 用来管理node版本

流程介绍

连接服务器
  • win + R 打开指令面板,输入指令mstsc确定

在这里插入图片描述

  • 来到远程桌面连接的窗口。
    在这里插入图片描述
  • 登陆自己的腾讯云服务器。点击右上角自己的头像,进入自己的服务器界面
    在这里插入图片描述
  • 云服务界面,选择自己的服务器类型。购买了哪个,就选择哪个。 界面可能不一样。我是买的轻量的类型。所以这里以轻量应用服务器为例。

在这里插入图片描述

  • 来到了如下界面,点击自己要选用的服务器
    在这里插入图片描述

  • 在如下界面,点击重置密码。这里建议用默认的用户名。就不要乱改了。设置一个符合要求的密码。
    在这里插入图片描述

  • 这是密码重置界面,按照流程操作即可。用户名就用系统默认,其他不再赘述。
    在这里插入图片描述

  • 就在上述的云服务器界面,点击左上角ip地址旁边的复制按钮
    在这里插入图片描述

  • 回到刚才的连接界面,把ip粘贴进计算机这行的输入框里。用户名就选用默认的,输入刚才重置的云服务器密码即可。然后点击连接按钮。
    在这里插入图片描述

  • 这时会弹出询问弹框,点击
    在这里插入图片描述

  • 连接成功后,就可以看到如下的服务器界面。
    在这里插入图片描述

  • 点击右上角蓝色边框位置的x,关闭里面的页面。就可以看到洁白的服务器桌面了。(注:文件夹是我的项目内容。初始状态只有一个垃圾箱,其他什么也没有)
    在这里插入图片描述


打包前端项目
  • 进入到前端项目文件夹,npm run build 打包前端项目
  • 在项目里会生成一个build文件夹
    在这里插入图片描述
  • 复制该文件夹,粘贴到服务器桌面。
    在这里插入图片描述

nginx服务器
  • https://blog.csdn.net/tuzi007a/article/details/116132038?spm=1001.2014.3001.5502博客中,找到nginx安装标题,点进去查看安装和指令。
    在这里插入图片描述
  • 安装后的服务器,是一个nginx文件夹,直接复制到服务器桌面即可。
    在这里插入图片描述
  • 在服务器的nginx文件夹里,打开文件夹,找到nginx.exe,双击它。启动nginx服务器。
    在这里插入图片描述

mongodb安装和使用
  • 这里需要注意的是mongodb对应的服务器的版本。以我的为例,我的服务器是Win Server 2012 R2
    在这里插入图片描述

  • 并且,我后端用的md5加密。

  • 所以,我需要安装的mongodb版本,就是需要对应2012 md5加密版本

  • 用于服务器的各个版本的mongodb : http://dl.mongodb.org/dl/win32/x86_64 。下载对应版本即可。
    在这里插入图片描述

  • 在服务器桌面,新建一个命名为mongodb的文件夹,把下载好的压缩包复制到文件夹里。然后解压并安装。

  • 安装好之后,配置全局路径。

  • 服务器内配置环境变量方法:https://jingyan.baidu.com/article/fd8044fafd79a21131137ab4.html

  • 打开cmd命令窗口,输入mongo指令,检查是否正常启动。
    在这里插入图片描述

  • 继续输入指令,创建用户名和密码。 user后面的root是用户名,pwd后面的root是密码。自己把root改成自己的用户名和密码。密码设置长一点。
    db.createUser({ user:'root',pwd:'root',roles:[ { role:'root', db: 'admin'}]});

  • 用这个账号和密码连接数据库:
    db.auth('root','root') 把root改成自己的用户名和密码。

  • 重启mongo服务。

  • 再来到云服务器页面,点击防火墙,再点击添加规则。给27017端口开个防火墙
    在这里插入图片描述

  • 点击之后,会有个弹框,在弹框里输入端口号和备注。防火墙就开好了。
    在这里插入图片描述

  • 在服务器 的mongodb文件里,找到mongod.cfg配置文件。
    在这里插入图片描述

  • 按照下图进行修改配置文件:
    在这里插入图片描述

  • 来到后端项目的mongodb配置文件mongodb.config.js,做如下配置:mongodb://root:密码@服务器ip:27017/?authSource=admin
    在这里插入图片描述

  • 再重启mongodb服务。


安装nvm及配置
  • 查看博客https://blog.csdn.net/tuzi007a/article/details/116132038?spm=1001.2014.3001.5502
后端项目部署
  • 后端的koa项目没有打包,是直接放服务器桌面的。具体做法是:
  • 先在服务器桌面,新建文件夹server
  • 在自己电脑里找到后端项目文件夹,把除了node_modules文件以外的所有文件,都复制到服务器的server文件夹里。
  • npm i安装node_modules
  • 启动后端项目即可。本地怎么启动的,在服务器上就怎么启动。
  • 在目录里找到这篇:
    在这里插入图片描述
    按照这个操作即可。

启动线上项目
  • nginx打开
  • mongodb启动
  • 后端项目启动
  • http://服务器ip 即可打开自己的项目了。


http://www.niftyadmin.cn/n/3124522.html

相关文章

百万级数据导入到postgresql

2019独角兽企业重金招聘Python工程师标准>>> txt格式为手机号回车 txt文件另存为csv文件。sql执行 copy cdw_phone_act_ref ("phone_num") from d://2.csv with ( FORMAT csv, DELIMITER ,)转载于:https://my.oschina.net/u/2356392/blog/541903

复杂可编程逻辑器件CPLD的基本结构

复杂可编程逻辑器件CPLD的基本结构 文章出处:czhlcai 发布时间: 2008/12/08 | 6911 次阅读 专业薄膜开关打样工厂,12小时加急出货1.基于乘积项的CPLD结构 CPLD的结构是基于乘积项(Product-Term)…

前端小知识点(合集)

这里写目录标题1,js实时监测input输入框值的变化1,js实时监测input输入框值的变化 dom.oninput function() {console.log(this.value); }这里需要注意的是 oninput , onchange , onpropertychange三者的区别-- https://www.cnblogs.com/em2464/p/76790…

WebRTC学习之 Intel® Collaboration Suite for WebRTC源码流程解读

年后回来,因为新项目的需求,开始了解WebRTC相关的知识。目前接触的是 Intel Collaboration Suite for WebRTC。刚开始看SDK发现很多概念是我目前不知道的,于是恶补了一周基本的网络相关的知识。再来看Demo和Jar包里面的源码,对其代…

XSD-JAVA

url&#xff1a;http://my.oschina.net/u/138995/blog/183094 person.xsd <?xml version"1.0" encoding"UTF-8"?> <xs:schema xmlns:xs"http://www.w3.org/2001/XMLSchema" elementFormDefault"qualified"><xs:eleme…

SQLPrompt 7.2发布

SQLPrompt 7.2发布 下载地址&#xff1a;http://www.red-gate.com/products/sql-development/sql-prompt/ 红门的热门产品SQLPrompt 发布了最新版本7.2&#xff0c;已经支持SQL Server2016 关键字高亮更加人性化 新功能亮点&#xff0c;当执行update/delete的时候没有加where它…

windows 10 常用快捷键

alt space&#xff1a;最大、最小、关闭&#xff1b;多屏互动&#xff1a;winp 仅此电脑屏幕&#xff1b;复制&#xff1b;拓展&#xff1b;仅第二屏幕&#xff1b;0. 不同于之前版本的变化 切换输入法&#xff1a;shift alt&#xff1b; win space&#xff1a;windows 10 系…

关于原生html和js上传文件的处理

目录基本结构样式处理为啥要做样式处理怎么处理样式input内用到的属性及用法accept 可以上传的文件类型获取上传后的文件sth.files字段解释获取视频文件的时长获取上传后文件生成的blob链接参考文档基本结构 <label for"sth">上传文件</label> <inpu…