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

50次阅读

从 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 查看日志信息 

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

服务器环境和镜像

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

liunx 环境安装 node

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

 yum -y update  yum -y install gcc gcc-c++ autoconf  cd /usr/local/src  wget https://nodejs.org/dist/v15.11.0/node-v15.11.0-linux-x64.tar.xz  tar xvJf node-v15.11.0-linux-x64.tar.xz  rm -rf node-v15.11.0-linux-x64.tar.xz  vi /etc/profile  export PATH=$PATH:/opt/software/node/bin/  source /etc/profile  node -v  npm install -g cnpm --registry=https://registry.npm.taobao.org  

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

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

1. 打开 xftp 工具连接我们的服务器 , 连接操作
前端部署>>>从 0 部署项目到服务器

2. 把接口项目放到服务器的 /home 文件下 , 例 : 我把 jxn-serve 项目拖到服务器文件区域
前端部署>>>从 0 部署项目到服务器

3. cd /home/jxn-serve  4. npm i  5. npm i pm2 -g  6. pm2 start index.js --name my-server  

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

 1.cd /usr/local  2.wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.2.11.tgz  3.tar zxvf mongodb-linux-x86_64-3.2.11.tgz  4.在 xftp 工具中把解压的 mongodb 包 mongodb-linux-x86_64-3.2.11 换成名字 mongodb  5.  mkdir -p /var/mongodb/data mkdir -p /var/mongodb/logs/ touch /var/mongodb/logs/log.log touch /var/mongodb/mongodb.conf 6.  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.  vim /var/mongodb/mongodb.conf   dbpath=/var/mongodb/data  logpath=/var/mongodb/logs/log.log  logappend = true port = 27017  fork = true auth = true 8.  vim ~/.bashrc  export PATH=$PATH:/usr/local/mongodb/bin  source ~/.bashrc  9. mongod --config /var/mongodb/mongodb.conf  /usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork  10. mongo  use admin  db.createUser({user:"test",pwd:"123",roles:["root"]})  db.auth("test","123")  11. mongodb://test:123@47.108.197.28/mybase?authSource=admin 或者 mongoose.connect(地址, { authSource: 'admin',  user: test, pass: 123, poolSize: 10,  useNewUrlParser: true,  useUnifiedTopology: true,  }) 12. 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  

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

针对第 4 点问题 会发生下面这个报错
前端部署>>>从 0 部署项目到服务器
解决 : 使用 ./configure –with-http_ssl_module –with-http_gunzip_module 命令

niginx 部署前端页面

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

  2. // 修改配置文件

 vi /usr/local/nginx/conf/nginx.conf  输入 i  找到监听 80 端口的的 sever 配置 , 把路径改成我们前端代码放置的路径即可 , 不懂得看下图 修改完毕之后 , 摁 Esc 键 , 输入 :wq nginx -s reload  --------------------------------------------------- 这些是基础命令 ps -ef |grep nginx  netstat -lntp   nginx -s stop nginx -s reload 

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

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

1.yum install git  2.git --version  3.cd /home  4.ssh-keygen -t rsa -C 5631*****@qq.com  5.cd ~/.ssh  6.ll  7.vi id_rsa.pub  8.ssh -T git@gitee.com  9.git clone xxx 码云地址  10.之后本地更新完代码提交 , 这边服务器就负责拉代码就行了 , 拉完记得可以重启下 nginx 9.cd /usr/local/nginx/conf  10.nginx -s reload  


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

—– 来自材鸡得建议 !!!

原文链接:https://blog.csdn.net/qq_47396328/article/details/126033163

正文完
 
追风者
版权声明:本站原创文章,由 追风者 2024-01-02发表,共计4097字。
转载说明:声明:本站内容均来自互联网,归原创作者所有,如有侵权必删除。 本站文章皆由CC-4.0协议发布。