前端部署>>>从0部署项目到服务器

从0部署项目到服务器

 第一次正式写文章,有点小兴奋 紧张,也不知道该说啥,感觉有用就给我点一个小爱心把。求求了,急需续命(๑•̀ㅂ•́)و✧

1.准备步骤
2.基础语法
3.服务器环境和镜像
4.liunx环境安装node
5.部署后端项目1-搭建node接口
6.部署后端项目2-搭建mongodb环境
7.niginx配置
8.niginx部署前端页面
9.git实现本地代码和服务器代码更新


准备步骤

 本次部署使用到了腾讯云服务器和华为云的域名,部署的项目是前后端分离模式。
 技术为>>> 前:打包后的单页面资源,后:node+express+mongodb。
 工具使用Xshell(操作服务器lunix环境的)xftp(操作服务器文件的) 。
  本次操作以先部署后端接口,后部署前端页面为方向


基础语法

	常用liunx命令
	
	cd 进入目录
	cd .. 返回上一个目录
	ls -a 查看当前目录
	mkdir abc 创建abc文件夹
	mv 移动或重命名
	rm 删除一个文件或者目录
	通过Xshell来编辑文件的基础命令
	
	vi /etc/profile // 编辑文件命令
	i  //插入
	:q //退出
	:q! 不保存退出
	:wq 保存退出
	pm2常用命令
	
	pm2 start index.js --name my-server  启动并命名进程
	pm2 list   显示所有进行
	pm2 stop my-server   停止my-server这个进程
	pm2 restart all   启动所有进程
	pm2 delete my-server   删除某个进程
	pm2 show my-server   查看某个进程的详情信息
	pm2 logs   查看日志信息

这块主要用来照顾白小白,有经验的略过即可~~

服务器环境和镜像

 在购买的服务器上安装环境和镜像
在这里插入图片描述
安装完之后去修改服务器密码,记得重启服务器,一定要记住密码哦,后面用工具连接服务器都是用这个密码
之后在去配置访问服务器的端口号和方式等,想快捷一点就直接all in(会有安全问题哈),也可以自己去配
在这里插入图片描述

liunx环境安装node

 打开Xshell,去新建连接服务器的终端,如
在这里插入图片描述
确定之后,会让你输入用户名和密码,就是上面步骤修改的用户和密码,之后进入到了一个黑色命令框中,这里就是操作lunix的界面了,下面按照步骤操作

	yum -y update   // 更新环境
	
	yum -y install gcc gcc-c++ autoconf   // 安装一些编译软件,注意版本的配合
	
	cd /usr/local/src   //切换 我是把一些基础软件下载到这个文件下,如下面把liunx安装到这个目录下
	
	wget https://nodejs.org/dist/v15.11.0/node-v15.11.0-linux-x64.tar.xz   // 下载的是liunx包的node版本,
	
	tar xvJf node-v15.11.0-linux-x64.tar.xz   // 解压node包  
	
	rm -rf node-v15.11.0-linux-x64.tar.xz    // 删除压缩包
	
	vi /etc/profile   //进入liunx配置的文件
	
	export PATH=$PATH:/opt/software/node/bin/  // 路径名字千万别搞错了 导出node环境的配置,注意后面的路径为自己安装node的路径
	
	source /etc/profile   // 再次保存修改的文件
	
	node -v   // 安装成功,检查版本
	
	npm install -g cnpm --registry=https://registry.npm.taobao.org   // 更换淘宝镜像

之后就可以在liunx环境下使用node的命令了


部署后端项目1-搭建node接口

 1.打开xftp工具连接我们的服务器,连接操作
在这里插入图片描述

 2.把接口项目放到服务器的/home文件下,例:我把jxn-serve项目拖到服务器文件区域
在这里插入图片描述

3. cd /home/jxn-serve  // 进入到我们的项目
4. npm i  // 下载所有的依赖
5. npm i pm2 -g  // 下载持久化包  使用pm2启动服务可以保持我们接口服务不断 关与pm2基础命令去文章顶部查看
6. pm2 start index.js  --name my-server  // 把对应的node文件开启持久化,主要报错可以直接启动项目下的/bin/www.js文件


部署后端项目2-搭建mongodb环境


1.cd /usr/local  // 切换到安装软件的目录

2.wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.2.11.tgz  // 下载mogodb包,注意版本一定是自己本地同版本的

3.tar zxvf mongodb-linux-x86_64-3.2.11.tgz  //  解压mongodb版本包

4.在xftp工具中把解压的mongodb包mongodb-linux-x86_64-3.2.11 换成名字 mongodb  // 注意后续得配置也要改成重命名得

5. // 在var文件夹里建立mongodb文件夹,并分别建立文件夹data用于存放数据,logs用于存放日志
mkdir -p  /var/mongodb/data
mkdir -p   /var/mongodb/logs/
touch /var/mongodb/logs/log.log
touch /var/mongodb/mongodb.conf

6. // 打开rc.local文件,添加CentOS开机启动项
chmod +x /etc/rc.d/rc.local
vi /etc/rc.d/rc.local  // 打开配置文件
/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork  // 追加得命令,注意路径名,修改完保存

7. // 配置mongodb.conf文件,应为mg默认27017端口可以不操作这第7步也行
vim /var/mongodb/mongodb.conf  // 打开文件
// 把配置文件加入
dbpath=/var/mongodb/data  // 数据存放地址
logpath=/var/mongodb/logs/log.log  // 日志地址
logappend = true  
port = 27017  // mongodb端口号
fork = true 
auth = true

8. // 配置mongodb的path
vim ~/.bashrc  // 打开配置文件
export PATH=$PATH:/usr/local/mongodb/bin  // 插入这段代码,注意路径
source ~/.bashrc //  保存配置文件

9.//  启动mongodb服务  下面使用哪个启动命令都可
mongod --config /var/mongodb/mongodb.conf //启动项目  
/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath  /var/mongodb/logs/log.log -fork  //启动项目  

10.// 为mongo数据库加密-----可选
mongo   // 使用命令打开mongodb操作界面
use admin  // 创建admin用户
db.createUser({user:"test",pwd:"123",roles:["root"]})   // 给用户添加账号密码的权限
db.auth("test","123") //输出1表示连接成功

11.// 由于在我们自己node项目中连接数据库需要注意
mongodb://test:123@47.108.197.28/mybase?authSource=admin
或者
mongoose.connect(地址, {
            authSource: 'admin', // 权限认证(添加这个属性!!!!!)
            user: test,
            pass: 123,
            poolSize: 10, // 数据库连接池大小
            useNewUrlParser: true, // 虽然没有报错但是看起来还是不爽,警告内容就是新版connect里边需要这两个参数
            useUnifiedTopology: true, // 当前服务器发现和监视引擎已弃用
})

12.//  本地mongodb数据库迁移到服务器数据库
https://blog.csdn.net/hqy_Angel/article/details/118724596   // 借鉴

① https://www.mongodb.com/try/download/database-tools  // 第一先去官网下载工具
② 解压后把mogodump.exe工具和mongorestore.exe工具放到/mongodb/data(数据库数据基本都在这个路径下)路径下去
③ mongodump -h 127.0.0.1 -o ./yourpath  // 打包这些数据
④ 把打包数据放到服务器的/mongodb/data路径下
⑤ mongod -shutdown -dbpath=/var/mongodb/data 
  mongod --config /var/mongodb/mongodb.conf   //   关闭服务在重新开启mongodb服务


nginx配置

注意:编译nginx需要环境,提前使用
yum -y install gcc gcc-c++ automake pcre pcre-devel zlib zlib-devel openssl openssl-devel
来安装

1.cd /usr/local  // 切换到安装软件的目录

2.wget http://nginx.org/download/nginx-1.16.1.tar.gz  // 下载nginx包  注意版本

3.tar -xzf nginx-1.16.1.tar.gz  // 解压这个包

4../configure   准备编译 基本会碰到一个问题   可拉到底下查看解决方案

5.make  // 编译

6.sudo make install    基本也会报错到对应的文件下添加一个空的nginx.pid的文本即可   借鉴http://gongfuma.com/front/tech/detail/id/280/typeid/3.html,https://blog.csdn.net/qq_25288617/article/details/124608082

7.cd /usr/local/nginx   // 找到我们安装好的nginx

8.想要让你的Nginx在任何位置上都能使用的话,我们就需要进入到cd /usr/local/bin 中,在这进行软链接:sudo ln -s /usr/local/nginx/sbin/nginx nginx
这样就可以在任何地方直接使用nginx了。

9.cd /usr/local/nginx/conf  // 切换nginx目录下,进行nginx的启动

10.nginx -t // 测试命令
   nginx    // 启动命令

针对第4点问题 会发生下面这个报错
在这里插入图片描述
解决: 使用 ./configure --with-http_ssl_module --with-http_gunzip_module 命令


niginx部署前端页面

  1. 把本地的前端项目拖到服务器的/home文件夹下,或者后续通过git直接拉代码下来

  2. // 修改配置文件

 vi /usr/local/nginx/conf/nginx.conf  // 进入到配置文件

 输入i   // 代表插入 vi语法在最顶上,可以去看看
 找到监听80端口的的sever配置,把路径改成我们前端代码放置的路径即可,不懂得看下图

 修改完毕之后,摁Esc键,输入 :wq
   
 nginx -s reload  // 重启nginx,这里就可以输入ip地址加80端口号访问我们得前端项目了
---------------------------------------------------
 这些是基础命令
 ps -ef |grep nginx   // 查看nginx是否正常运行 
 netstat -lntp  //查看所有被主机监听的端口
 
  // 停止nginx/重启nginx
 nginx -s stop
 nginx -s reload

在这里插入图片描述


git实现本地代码和服务器代码更新

1.yum install git  // 下载git

2.git --version //判断是否安装成功

3.cd /home // 切换到我们需要存放的目录

4.ssh-keygen -t rsa -C 5631*****@qq.com  // 在服务器创建私钥ssh,这里得邮箱可以是git,码云账号得邮箱

5.cd ~/.ssh  // 切换到私钥文件目录

6.ll //看到ssh文件夹中所有的文件

7.vi  id_rsa.pub //打开私钥,复制里面的容器到git或码云去配置添加ssh

8.ssh -T git@gitee.com  //查看ssh是否配置成功

9.git clone xxx码云地址   // clone代码下来

10.之后本地更新完代码提交,这边服务器就负责拉代码就行了,拉完记得可以重启下nginx

9.cd /usr/local/nginx/conf  // 切换nginx目录下,进行nginx的启动

10.nginx -s reload   // 重启动命令


总结: 万事不怕试,试错了就重新开始,多错几次,对于代码得理解才会更加了如于心了□~( ̄▽ ̄)。

 ----- 来自材鸡得建议!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值