技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-4.git拉取代码到服务器

简介: 国内的码云gitee使用。
1.将本地代码上传到git服务器

git是国外代码库,可以使用国内gitee码云
没有账号直接注册即可,点击创建仓库:
在这里插入图片描述
设置仓库:
在这里插入图片描述
点击创建后,查看入门教程,我们开始上传代码到git服务器:
在这里插入图片描述
(1)在本地安装git
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-3.nginx配置web服务器并安装网站环境文章开始我们就已经下载了完整的git,所以我们可以在vscode终端直接使用。
(2)在本地使用git创建keygen
过程与服务器中一样:
在这里插入图片描述
同样保存记录公钥keygen,方便以后直接使用。
(3)将公钥部署到git服务器
将公钥部署到git服务器后,每次上传代码就不需要输入密码了。
在这里插入图片描述
进入设置页面,找到ssh公钥进行公钥的添加:
在这里插入图片描述
输入密码验证后成功添加:
在这里插入图片描述
此时成功,就等于git授权了当前你这台电脑上传下载文件的权限。
(4)初始化git
首先对git进行全局设置:

git config --global user.name "bafangsheji"
git config --global user.email "9031075+bafangsheji@user.noreply.gitee.com"

在这里插入图片描述
然后初始化git

git init

目的是初始化当前文件夹为git项目。
在这里插入图片描述
显示没有git命令,这是因为最初下载的时候没有意识到会有可能在非git软件上使用git,所以我们只要将git添加到环境变量即可。
找到环境变量在哪:
在这里插入图片描述
先将git的bin路径添加到环境变量:
在这里插入图片描述
在这里插入图片描述
然后找到cmd所在位置,同样路径添加到环境变量:
在这里插入图片描述
添加后重启vscode,输入命令git init:
在这里插入图片描述
我这变绿了,好可怕,但是成功了:)。
此时绿色就代表这个项目为git项目。
此时我们可以看到项目文件夹中的部分文件夹为灰色,基本上都是一些包文件,是因为在.gitgnore文件中自动识别了一些没有必要一起上传的大文件包,在上传到git服务器时自动忽略。这些包之后在服务器中可以使用一条命令根据package.json文件在服务器中重新下载。
在这里插入图片描述
(5)把当前文件夹添加到git项目中

git add .

表示将项目文件夹中所有文件加入到git版本,以便于上传到git。
(6)将当前项目提交到本地(保存当前项目状态)

// git commit提交到本地  -am 添加描述
git commit -am "初始化"

在这里插入图片描述
此时git要求我们提交一些信息,按照他的要求提交我们的信息。
添加完信息后再次执行提交到本地命令git commit -am "初始化":
一顿更新,文件状态又恢复原状,意思是本地代码回来了。
在这里插入图片描述
其中create mode ...意思是对于git来说新创建了这些文件。
(7)给本地git添加一个源头地址
源头地址大致就是我们本地代码需要上传到的地址。
origin是约定俗成的源头名,你想要改成其他名字也可以。
地址就是最开始我们找到的git的ssh地址。

git remote add origin git@gitee.com:bafangsheji/node-mine.git

在这里插入图片描述
(8)提交本地代码到git服务器

// git push上传代码  -u xxxx上传到的地址
git push -u origin master

首次提交代码需要使用-u说明添加到的位置,以后提交直接git push即可。
在这里插入图片描述
成功上传,在git页面中刷新查看,除了灰色的文件夹都成功上传了:
在这里插入图片描述

2.在网站服务器中拉取git服务器中的代码

(1)部署网站服务器中的公钥
首先我们要将之前网站服务器中的ssh-keygen公钥部署到git账号中,用来作网站服务器对git中代码的拉取。
与本地公钥不同的是,网站服务器中的公钥不要直接添加到设置中的SSH公钥中,因为如果你的网站项目是给客户做的,客户就可以在服务器中访问你git账号中的所有项目。
在git服务器中进入我们的项目,选择管理,找到公钥管理,添加部署公钥:
在这里插入图片描述
将网站服务器中的公钥录入添加:
在这里插入图片描述
添加并自动启用后我们就可以拉取代码到网站服务器了。
(2)拉取代码到网站服务器
登录网站服务器:
在这里插入图片描述
ll命令查看当前服务器中所有文件夹和文件:
在这里插入图片描述
进入‘/’目录并再次查询,找到/var文件夹,查看:
在这里插入图片描述
进入'www'文件夹,在进入html文件夹,其中只有一个html文件:
在这里插入图片描述
此时在html文件夹中创建一个data文件夹并进入:
在这里插入图片描述
具体命令:

// 切换文件夹
cd ***
// 查看文件夹文件
ls
// 查看文件夹文件,并显示隐藏文件
ll
// 新建文件夹(make directory)
mkdir ***

重头戏,在这个data文件夹中拉取项目代码:

git clone ***

复制git中ssh地址:
在这里插入图片描述
开始拉取代码:
在这里插入图片描述
此时ll查看data文件夹内容:
在这里插入图片描述
代码拉取成功,此时我们根据server端package.json中之前保存下来的效果包名下载之前被忽略的所需功能包。

// 从package.json中找到需要下载的文件包进行下载
npm i

过程中让我更新npm,下载很快不知道是否更新完node_module中的包。
检查一下,可以找到几个我们之前安装过的包:
在这里插入图片描述
应该没什么问题,这时我们就可以启动该项目了:

node index.js

回到server文件夹,输入命令,得到端口号:
在这里插入图片描述
但此时情况与我们本地相同,都是一个本地环境上项目的开启,一旦关闭服务器连接,项目就同时关闭了。所以我们需要使用pm2对我们的项目进行后台连接,实时开启我们的项目。

3.使用pm2实时开启项目

(1)全局安装pm2:

npm i pm2 -g

在这里插入图片描述
(2)使用pm2开启项目

pm2 start index.js

在这里插入图片描述
此时我们的项目就启动了,同时没有占用当前终端,可以继续操作。

更多相关pm2命令:

// 查看当前进程
pm2 list
// 查看此时占用端口
pm2 logs index

在这里插入图片描述
此时根据查询logs发现项目启动后报错了,所以赶紧根据提示查看了报错原因:
在这里插入图片描述
经查询后说是node 和 npm 版本的原因,试了半天问题并没有解决,于是我关闭了pm2,再次使用node index.js进行开启端口,查看到了问题所在:

// 根据当前项目序列0关闭pm2后台运行的项目
pm2 stop 0
// node开启端口
node index.js

一失足成千古恨,把一切warning报错习惯性忽略的我终于被打了脸。经查询原因是mongodb数据库的问题,它要求我加上{ useUnifiedTopology: true },没办法,本地代码中找到数据库设置:
在这里插入图片描述
别扭啊,搞不懂,但也没办法,重新将代码上传到git服务器,再到网站服务器拉取一遍试一下:
在这里插入图片描述
此时git中文件已更新:
在这里插入图片描述
网站服务器再次拉取项目:
当输入git命令,显示没有.git时
在这里插入图片描述
输入命令git init 创建.git文件
在这里插入图片描述
重新拉取项目前先将项目移除:

// 删除文件
rm ***
// 删除文件夹
rmdir ***
// 删除文件夹及子文件
rm -rf ***

在这里插入图片描述
此时重新拉取git服务器上的项目代码:
在这里插入图片描述
进入server,再次下载package.json挂载的包文件后启动项目:
在这里插入图片描述
成功,没有报错,牛比。
此时关闭连接,使用pm2启动项目,并使用curl命令查看项目:
在这里插入图片描述
成功进入页面,由于其他页面我再编译生产环境时没有做,所以大家如果当时把localhost:3000:web做了的话就可以进去看一下。
此时服务器中的项目就可以访问了,下篇文章我们配置nginx反向代理,使得我们可以根据域名访问我们的项目,看到页面。

相关文章
|
1天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
13 2
|
1天前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
12 1
|
8天前
|
JavaScript 前端开发 测试技术
探索现代JavaScript开发的最佳实践
本文探讨了现代JavaScript开发中的最佳实践,涵盖ES6+特性、现代框架使用、模块化与代码分割、测试驱动开发、代码质量与性能优化、异步编程、SPA与MPA架构选择、服务端渲染和静态站点生成等内容,旨在帮助开发者提升代码质量和开发效率。
|
11天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第36天】本文将引导您探索Node.js的世界,通过实际案例揭示其背后的原理和实践方法。从基础的安装到高级的异步处理,我们将一起构建一个简单的后端服务,并讨论如何优化性能。无论您是新手还是有经验的开发者,这篇文章都将为您提供新的视角和深入的理解。
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
133 2
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
43 0
|
1月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
1月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
1月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
|
1月前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
下一篇
无影云桌面