10

Vue + Node + MongoDB 项目在CentOS8.2服务器上部署到宝塔Linux面板流程

 3 years ago
source link: https://segmentfault.com/a/1190000040617754
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Vue + Node + MongoDB 项目在CentOS8.2服务器上部署到宝塔Linux面板流程

发布于 9 月 2 日

分享wallBlog项目部署上线的流程。以下是部署需要的工具以及环境：

  • mac系统操作
  • 一台系统为CentOS 8.2服务器
  • 宝塔Linux面板管理、运维项目
  • Node v14.15.1
  • Npm v6.14.8
  • PM2管理器 v5.2.0
  • MongoDB v4.4.6
  • Nginx v1.21.0

我这里仅是大概介绍一下流程，具体的服务器部署介绍可以参考该视频：https://www.bilibili.com/video/av70120365/

二、服务器远程连接

从阿里云买完一台CentOS 8.2服务器，拿到服务器的公网ip，就可以在终端进行服务器远程连接：

  • 输入命令：ssh [email protected]（公网ip地址）；
  • 输入服务器密码，可在阿里云控制台里面重置密码；

  • 连接上之后可以新增一个用户，就不用一直用root用户登陆了。

    1、adduser wall // 添加用户名wall
2、passwd wall  // 重新设置密码
3、whereis sudoers // 查询sudo权限者路径
4、chmod -v u+w /etc/sudoers // 给该路径下的sudoers者添加读写权限
5、vim /etc/sudoers // 编辑该文件，在里面添加sudoers，在root All=(ALL) ALL下面添加一行 wall All=(ALL) ALL，就能保存了

    vim文件会涉及一些Linux基本命令：

    1、 i    // 光标落地，可编辑文件
2、 Esc  // 收起光标，不可编辑了
3、 :q   // 不保存退出文件
4、 :wq  // 保存且退出文件
5、 :wq! // 强制保存且退出文件

    三、更换阿里的yum源且更新

    1、备份你的原镜像文件，以免出错后可以恢复。

    mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup

    2、下载新的CentOS-Base.repo
    到/etc/yum.repos.d/。我这边是CentOs8.2版本，所以对应下载是阿里云的Centos-8.repo版本，根据服务器版本下载对应repo版本，这个需要注意一下。

    wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-8.repo

    3、运行yum makecache生成缓存。

    yum makecache

    4、查看系统所有可用源。

    yum repolist enabled

    5、更新yum。

    yum -y update

    更新完yum之后，就可以下载宝塔Linux面板了。

注意：下载宝塔Linux面板需要一个干净的系统，不然下载不了。所以连接上了服务器，先更新一下yum，然后直接下载宝塔Linux面板，不做多余的事。如果系统已经安装了其他东西，可以去阿里云重置一下系统，把系统清空干净即可。

四、下载宝塔Linux面板

  • 去宝塔官网 https://www.bt.cn/bbs/thread-19376-1-1.html 下载，连接服务器时需要用root用户连接，因为只有root用户才可下载；
  • 下载完之后，控制台会显示登陆面板的账号、密码、访问路径，这个需要存起来，登陆要用；
  • 在访问前需要去阿里云的网络安全组还有防火墙，放开8888端口才能进行访问；
  • 访问路径：xx.xx.xx.xx:8888 (公网ip地址 + 8888端口)；
  • 输入账号密码就能登进去了，可以在面板重置账号、密码、访问路径。

五、部署前端Vue项目

  • 将打包后的Vue项目的资源放在宝塔里的文件目录下，自行定义路径；
  • 在宝塔里的软件商店下载Nginx；

  • 下完之后就可以在里面配置Vue文件资源指向以及ip地址。

    server
{
  listen 80;
  server_name xx.xx.xx.xx;
  index index.html index.htm;
  root  /www/wwwroot/wall-blog/client;
}

    到这步结束，前端项目就部署成功了，访问一下ip，就有页面出现了。

六、部署Node项目

  • Node默认的端口是3000，所以得去阿里云的网络安全组和防火墙先放开3000端口；
  • 在宝塔里的软件商店下载PM2管理器和MongoDB。PM2管理器内置 Node.js + Npm + Nvm + PM2，所以不需要额外下载Node了。而且能在PM2管理器里面切换Node的版本；
  • MongoDB配置项BindIP要改成 0.0.0.0，这样所有的外网都能访问；
  • 配完之后在宝塔内置的终端访问mongo服务，新建数据库，导入数据等。

注意：

1. 数据库名可自行修改，但是需要跟code/server/config.js文件同步上；

2. 登录管理后台时，需要给数据库创建users集合，并注册一个账号进行登录；

> mongo // 开启mongo服务
> show dbs // 显示数据库列表
> use wallBlog // 新建一个wallBlog数据库
> db.createUser({user:"wall",pwd:"123456",roles:[{role:"readWrite",db:'wallBlog'}]}) // 在wallBlog数据库创建一个wall用户，密码为123456
> show users // 展示该库有哪些用户
> db.auth("wall", "123456"); // 数据库认证一下用户、密码
> db.users.insert({  // 往该库的users集合插入一条数据，账号：admin  密码：123456
    "pwd" : "e10adc3949ba59abbe56e057f20f883e",
    "username" : "admin",
    "roles" : [
        "admin"
    ]
})
> show collections // 查询该库下的集合（类似于mysql的表）
> db.users.find() // 查询users集合下的所有数据
  • 在宝塔的文件目录里添加Node项目资源，上传的时候去掉node modules。
  • Node项目里需包含package.json、package-lock.json、.babelrc文件；前2者为了安装依赖，后者是为了将es6的语法编译为CommonJs规范的语法；
  • 安装好依赖，就可以打开PM2管理器，添加Node项目，让项目跑起来；

  • 在nginx配置接口的反向代理

    server
{
  location /client_api {
      proxy_pass http://127.0.0.1:3000/client_api;
      proxy_set_header Host $host:$server_port;
  }
}

    需要注意的是：要配上接口的前缀（client_api），不然会匹配到所有请求，包含了前端一些打包后的资源请求，会导致有问题。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK