多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
1.将本地代码上传到git服务器 git是国外代码库,可以使用国内[gitee码云](https://gitee.com/)。 没有账号直接注册即可,点击创建仓库: ![](https://img.kancloud.cn/d0/f7/d0f7095f100a200854e2c4cec08a52ee_1240x769.png) 设置仓库: ![](https://img.kancloud.cn/6b/21/6b215d709001bbc0e5486b21542f60fe_1231x787.png) 点击创建后,查看入门教程,我们开始上传代码到git服务器: ![](https://img.kancloud.cn/b6/f2/b6f21666db6f999acc2df3269616e50e_1231x918.png) (1)在本地安装git 在技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-3.nginx配置web服务器并安装网站环境文章开始我们就已经下载了完整的git,所以我们可以在vscode终端直接使用。 (2)在本地使用git创建keygen 过程与服务器中一样: ![](https://img.kancloud.cn/3b/3b/3b3ba7540983a1c73f9ed4b0cb8a21e5_1261x844.png) 同样保存记录公钥keygen,方便以后直接使用。 (3)将公钥部署到git服务器 将公钥部署到git服务器后,每次上传代码就不需要输入密码了。 ![](https://img.kancloud.cn/18/07/1807e4edcb15089d811a23b6156eecb2_1240x461.png) 进入设置页面,找到ssh公钥进行公钥的添加: ![](https://img.kancloud.cn/ab/33/ab339f43bef38641cb991db6e900eb05_1240x1259.png) 输入密码验证后成功添加: ![](https://img.kancloud.cn/9b/67/9b674d507a7fbf8b184b90420a908bd8_752x233.png) 此时成功,就等于git授权了当前你这台电脑上传下载文件的权限。 (4)初始化git 首先对git进行全局设置: ``` git config --global user.name "bafangsheji" git config --global user.email "9031075+bafangsheji@user.noreply.gitee.com" ``` ![](https://img.kancloud.cn/fe/c0/fec04e0999bcfc27ab786778d76616a6_854x57.png) 然后初始化git ``` git init ``` 目的是初始化当前文件夹为git项目。 ![](https://img.kancloud.cn/c3/ed/c3ede227420563d055348f083d33d605_924x157.png) 显示没有git命令,这是因为最初下载的时候没有意识到会有可能在非git软件上使用git,所以我们只要将git添加到环境变量即可。 找到环境变量在哪: ![](https://img.kancloud.cn/1d/4b/1d4b50198bccccd4562e2a18154e51ed_2042x1317.png) 先将git的bin路径添加到环境变量: ![](https://img.kancloud.cn/1a/1e/1a1e3b1e45b2d6b88bee36aa926d8225_541x570.png) 然后找到cmd所在位置,同样路径添加到环境变量: ![](https://img.kancloud.cn/d2/99/d29903716ff6115f4efc42d8eb05ab2d_587x31.png) 添加后重启vscode,输入命令git init: ![](https://img.kancloud.cn/0a/1e/0a1e642ca564f3969205f88ad8c96325_1251x844.png) 我这变绿了,好可怕,但是成功了:)。 此时绿色就代表这个项目为git项目。 此时我们可以看到项目文件夹中的部分文件夹为灰色,基本上都是一些包文件,是因为在.gitgnore文件中自动识别了一些没有必要一起上传的大文件包,在上传到git服务器时自动忽略。这些包之后在服务器中可以使用一条命令根据package.json文件在服务器中重新下载。 ![](https://img.kancloud.cn/98/ae/98aedb492ab208ce9be493e6459ed5d2_218x486.png) (5)把当前文件夹添加到git项目中 ``` git add . ``` 表示将项目文件夹中所有文件加入到git版本,以便于上传到git。 (6)将当前项目提交到本地(保存当前项目状态) ``` // git commit提交到本地 -am 添加描述 git commit -am "初始化" ``` ![](https://img.kancloud.cn/55/2f/552f1fd1fca1f590d298c21364f51f0e_630x282.png) 此时git要求我们提交一些信息,按照他的要求提交我们的信息。 添加完信息后再次执行提交到本地命令`git commit -am "初始化":` 一顿更新,文件状态又恢复原状,意思是本地代码回来了。 ![](https://img.kancloud.cn/74/94/7494ce4fdd957bea8b942bde899aa712_1261x844.png) 其中create mode …意思是对于git来说新创建了这些文件。 (7)给本地git添加一个源头地址 源头地址大致就是我们本地代码需要上传到的地址。 origin是约定俗成的源头名,你想要改成其他名字也可以。 地址就是最开始我们找到的git的ssh地址。 ``` git remote add origin git@gitee.com:bafangsheji/node-mine.git ``` ![](https://img.kancloud.cn/a2/ae/a2ae8f2bc56a7fb20328309a3467e5a1_832x464.png) (8)提交本地代码到git服务器 ``` // git push上传代码 -u xxxx上传到的地址 git push -u origin master ``` 首次提交代码需要使用-u说明添加到的位置,以后提交直接git push即可。 ![](https://img.kancloud.cn/a2/ae/a2ae8f2bc56a7fb20328309a3467e5a1_832x464.png) 成功上传,在git页面中刷新查看,除了灰色的文件夹都成功上传了: ![](https://img.kancloud.cn/b8/94/b894c37cf5f26b907f3b060af68de2c1_1231x887.png) 2.在网站服务器中拉取git服务器中的代码 (1)部署网站服务器中的公钥 首先我们要将之前网站服务器中的ssh-keygen公钥部署到git账号中,用来作网站服务器对git中代码的拉取。 与本地公钥不同的是,网站服务器中的公钥不要直接添加到设置中的SSH公钥中,因为如果你的网站项目是给客户做的,客户就可以在服务器中访问你git账号中的所有项目。 在git服务器中进入我们的项目,选择管理,找到公钥管理,添加部署公钥: ![](https://img.kancloud.cn/79/3c/793c544c696f44e245ae5ff8fa534bc3_1291x622.png) 将网站服务器中的公钥录入添加: ![](https://img.kancloud.cn/36/80/368025dc29305766c460949b056c66df_1291x617.png) 添加并自动启用后我们就可以拉取代码到网站服务器了。 (2)拉取代码到网站服务器 登录网站服务器: ![](https://img.kancloud.cn/5f/01/5f019dc5fec75608f4eaaeabb36c9340_595x377.png) ll命令查看当前服务器中所有文件夹和文件: ![](https://img.kancloud.cn/5e/65/5e65c26e9164a53b5530d50a63ade1eb_426x246.png) 进入‘/’目录并再次查询,找到/var文件夹,查看: ![](https://img.kancloud.cn/e8/64/e8648e9864e2cd4216a38f76e7b708d2_459x258.png) 进入’www’文件夹,在进入html文件夹,其中只有一个html文件: ![](https://img.kancloud.cn/33/f5/33f549baf557811c2647818474327ea9_595x249.png) 此时在html文件夹中创建一个data文件夹并进入: ![](https://img.kancloud.cn/27/86/27867379ce5570d28b644d9f7d756526_442x117.png) 具体命令: ``` // 切换文件夹 cd *** // 查看文件夹文件 ls // 查看文件夹文件,并显示隐藏文件 ll // 新建文件夹(make directory) mkdir *** ``` 重头戏,在这个data文件夹中拉取项目代码: ``` git clone *** ``` 复制git中ssh地址: ![](https://img.kancloud.cn/b9/70/b97018ef88c53a3c2d56dd5853aba68a_330x185.png) 开始拉取代码: ![](https://img.kancloud.cn/81/44/81441665c34f85219cda43069924a524_568x204.png) 此时ll查看data文件夹内容: ![](https://img.kancloud.cn/47/d4/47d4c3e56bb736677f56b4630d615b33_467x437.png) 代码拉取成功,此时我们根据server端package.json中之前保存下来的效果包名下载之前被忽略的所需功能包。 ``` // 从package.json中找到需要下载的文件包进行下载 npm i ``` 过程中让我更新npm,下载很快不知道是否更新完node_module中的包。 检查一下,可以找到几个我们之前安装过的包: ![](https://img.kancloud.cn/b8/1e/b81e5c141a51340ada373a945ce575ea_595x489.png) 应该没什么问题,这时我们就可以启动该项目了: ``` node index.js ``` 回到server文件夹,输入命令,得到端口号: ![](https://img.kancloud.cn/36/3d/363d5565f4cdf39eb528d0d9b87f4cb2_561x128.png) 但此时情况与我们本地相同,都是一个本地环境上项目的开启,一旦关闭服务器连接,项目就同时关闭了。所以我们需要使用pm2对我们的项目进行后台连接,实时开启我们的项目。 3.使用pm2实时开启项目 (1)全局安装pm2: ``` npm i pm2 -g ``` ![](https://img.kancloud.cn/d0/0a/d00a331b65d51cf1390277d5663fa0b3_472x83.png) (2)使用pm2开启项目 ``` pm2 start index.js ``` ![](https://img.kancloud.cn/b4/78/b478c21950c7867845cffc3bf4f55042_557x675.png) 此时我们的项目就启动了,同时没有占用当前终端,可以继续操作。 更多相关pm2命令: ``` // 查看当前进程 pm2 list // 查看此时占用端口 pm2 logs index ``` ![](https://img.kancloud.cn/fe/6d/fe6d8f1ae48004b524352be63bf4ba43_566x298.png) 此时根据查询logs发现项目启动后报错了,所以赶紧根据提示查看了报错原因: ![](https://img.kancloud.cn/24/d3/24d3167d8b95aa9527a037c9636c1084_568x219.png) 经查询后说是node 和 npm 版本的原因,试了半天问题并没有解决,于是我关闭了pm2,再次使用node index.js进行开启端口,查看到了问题所在: ``` // 根据当前项目序列0关闭pm2后台运行的项目 pm2 stop 0 // node开启端口 node index.js ``` 一失足成千古恨,把一切warning报错习惯性忽略的我终于被打了脸。经查询原因是mongodb数据库的问题,它要求我加上`{ useUnifiedTopology: true }`,没办法,本地代码中找到数据库设置: ![](https://img.kancloud.cn/99/c8/99c8ba869e8668196f6b89fc6e5d76b4_1261x844.png) 别扭啊,搞不懂,但也没办法,重新将代码上传到git服务器,再到网站服务器拉取一遍试一下: ![](https://img.kancloud.cn/30/2b/302bd6fc74232d4852ee8e61e58b5702_1261x844.png) 此时git中文件已更新: ![](https://img.kancloud.cn/3e/ae/3eae8ce32af63e5e0c32561b640b9269_846x573.png) 网站服务器再次拉取项目: 当输入git命令,显示没有.git时 ![](https://img.kancloud.cn/5e/13/5e1394ed98b8f1a1f4253dcf99a94a7a_487x37.png) 输入命令git init 创建.git文件 ![](https://img.kancloud.cn/11/3b/113b2161687fefa6ba401af43f3cb90a_350x34.png) 重新拉取项目前先将项目移除: ``` // 删除文件 rm *** // 删除文件夹 rmdir *** // 删除文件夹及子文件 rm -rf *** ``` ![](https://img.kancloud.cn/40/a2/40a20e35b7334045c46f5e798378dd6b_378x47.png) 此时重新拉取git服务器上的项目代码: ![](https://img.kancloud.cn/e7/d3/e7d306e8273b82e730e28bd8fd7f0225_569x147.png) 进入server,再次下载package.json挂载的包文件后启动项目: ![](https://img.kancloud.cn/92/4b/924ba1294b4c509f6ef94d4b1549bf74_516x114.png) 成功,没有报错,牛比。 此时关闭连接,使用pm2启动项目,并使用curl命令查看项目: ![](https://img.kancloud.cn/49/55/49553dfeb35b522c45cca6c6fc9833ad_566x188.png) 成功进入页面,由于其他页面我再编译生产环境时没有做,所以大家如果当时把localhost:3000:web做了的话就可以进去看一下。 此时服务器中的项目就可以访问了,下篇文章我们配置nginx反向代理,使得我们可以根据域名访问我们的项目,看到页面。