欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

将Nodejs和Vue全栈项目部署到阿里云Centos服务器

程序员文章站 2022-06-11 13:29:09
...

1.购买一个服务器(1核2G及以上配置)

如果是在校生的话,建议进行学生认证,因为阿里云对学生的优惠真的很大。
1核2G ECS云服务器一年只要115左右。

一定要配置安全组规则。打开80端口,443端口(如果后续要配置ssl证书实现https访问),21端口(进行ftp连接)。 同时还可以打开后端代码监听的端口,这样当代码运行之后输入域名加端口就可以进行访问

2.购买一个域名

第一次购买有优惠。如果不是*域名几块就能搞定~。
*域名稍稍贵点。 推荐万网购买,因为是阿里旗下的~
  • 2.1 进入到阿里云域名云解析页面。将服务器的公网IP解析到域名上

将Nodejs和Vue全栈项目部署到阿里云Centos服务器

3.登录到服务器

  • 3.1 登录进服务器
ssh [email protected]  
如果Windows无法识别ssh命令,那么你可以下载ssh连接工具[Putty](https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html)
  • 3.2 进行系统内核更新升级
yum update -y

4.安装需要用到的工具

  • 4.1安装最新版的NodeJS
1. curl -sL https://rpm.nodesource.com/setup_10.x | bash -
2. yum install -y nodejs
3. 输入node -v和npm -v。看是否安装成功。如果出现版本号就代表安装成功
  • 4.2 安装MongoDB
4. vim /etc/yum.repos.d/mongodb-org-3.4.repo  创建这个文件
5. 添加以下内容:
 	[mongodb-org-3.4]  
     name=MongoDB Repository  
     baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.4/x86_64/  
     gpgcheck=1  
     enabled=1  
     gpgkey=https://www.mongodb.org/static/pgp/server-3.4.asc
 6. yum -y install mongodb-org  执行安装命令
 7. vim /etc/mongod.conf 打开配置文件,将绑定ip由127.0.0.1改为0.0.0.0 这样所有都可以访问
 8. 输入 mongo --version 查看是否安装成功
  • 4.3 安装nginx
yum -y install nginx
直接输入nginx就可以启动。
安装nginx 的目的是将我们的项目进行反向代理
  • 4.4 安装git
yum -y install git
ssh-****** -t rsa -C "[email protected]"  生成**拷贝到github上,这样才能在服务器上进行git操作
  • 4.5 安装pm2
yum -y install pm2
pm2是让后端代码一直保持运行,即使退出了ssh连接,它也一样的在运行。

5. 将前端项目进行打包

  • 进入前端项目输入npm run build。
  • 一定要把axios配置的baseURL换成服务器的IP

6. 上传代码到服务器

6.1 上传后端代码

  • 6.1.1 配置app.js
// 使用静态文件
app.use(express.static('./client'))

// 这一步目的是,当访问根路径时,把前端代码读取出来并显示
app.get('/', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'index.html'))
})
以上两步关联后面的操作!!
  • 6.1.2 使用git拉取后端代码
在服务器的/home 路径下新建一个web文件夹(命名随意)
输入克隆代码 :
git clone [email protected]:XXXXX/xxx.git

6.2 上传前端代码

使用ftp工具(FileZilla)。输入服务器IP 以及你的用户名、密码就进行连接。
在后端文件夹下新建一个空文件夹(client)并进入
将打包后前端代码(dist文件夹下)全部移动到client文件夹下

6.3 运行项目

进入到后端代码文件夹,输入:
pm2 start app.js --name xxx   (--name的意思是给这个服务起个名字,方便后期管理)
这样项目就启动起来了,输入域名和端口就可以实现访问
下面介绍一下pm2常用命令:
pm2 restart xxx  (xxx可以是文件名也可以是刚刚起的别名)

7. 配置nginx反向代理

有人会说:上面那样域名加端口访问太麻烦了,我想直接输入域名就可以访问!怎么实现呢?
那就要用到nginx反向代理了,下面介绍如何进行代理配置:

vim /etc/nginx/nginx.conf 这样直接进入nginx配置文件编辑界面。
但是这样编辑不方便,我们可以把文件传输到本地(使用fileZilla),更改之后再传到服务器。
本地使用vscode打开,找到server配置项
server {
    listen       80;
    server_name  你的域名;

    location / {
        proxy_pass http://127.0.0.1:5000;   // 表示代理到本地启动的5000端口启动的项目
  	}
}
修改完成后传输到服务器,重启nginx服务:
nginx -s reload 
一个小技巧,可以使用nginx -t 测试刚刚修改的nginx配置是否可用!
其他的配置都不用改变,这样就实现了最简单的nginx反向代理。
让我们试试输入域名访问吧!
It Works! Ohhhhhhhhhhhhhhhhhhhhhhhhhhhh!

流程就这样啦~ 博主按照这样操作是完全成功的哦!谢谢观看