将Nodejs和Vue全栈项目部署到阿里云Centos服务器
1.购买一个服务器(1核2G及以上配置)阿里云对学生的优惠很大。1核2G ECS云服务器一年只要115左右。一定要配置安全组规则。打开80端口,443端口(如果后续要配置ssl证书实现https访问),21端口(进行ftp连接)。 同时还可以打开后端代码监听的端口,这样当代码放上去运行之后输入域名加端口就可以进行访问2.购买一个域名第一次购买有优惠。如果不是顶级域名几块就能搞定~。顶级...
·
1.购买一个服务器(1核2G及以上配置)
如果是在校生的话,建议进行学生认证,因为阿里云对学生的优惠真的很大。
1核2G ECS云服务器一年只要115左右。
一定要配置安全组规则。打开80端口,443端口(如果后续要配置ssl证书实现https访问),21端口(进行ftp连接)。 同时还可以打开后端代码监听的端口,这样当代码运行之后输入域名加端口就可以进行访问
2.购买一个域名
第一次购买有优惠。如果不是顶级域名几块就能搞定~。
顶级域名稍稍贵点。 推荐万网购买,因为是阿里旗下的~
- 2.1 进入到阿里云域名云解析页面。将服务器的公网IP解析到域名上
3.登录到服务器
- 3.1 登录进服务器
ssh root@IP
如果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-keygen -t rsa -C "email@qq.com" 生成密钥拷贝到github上,这样才能在服务器上进行git操作
- 4.5 安装pm2
yum -y install pm2
pm2是让后端代码一直保持运行,即使退出了ssh连接,它也一样的在运行。
5. 将前端项目进行打包
5.1 配置开发环境与生产环境
1.配置生产环境
根目录创建 .env文件
NODE_ENV = 'production'
outputDir = 'online'
1.配置生产环境
根目录创建 .env.dev文件
NODE_ENV = 'development'
outputDir = 'dist'
NODE_ENV是全局都可以获取的变量。process.end.NODE_ENV
5.2 配置生产环境打包命令
在package.json文件新建一条scripts命令
"online": "vue-cli-service build --mode production"
5.3 配置axios的baseURL
axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '//localhost:5000/api' : '//www.xzw999.com/api'
5.4 进行打包
使用 npm run online 就可以打包生成用于服务器的代码了!
6. 上传代码到服务器
6.1 上传后端代码
- 6.1.1 配置app.js
// 使用静态文件
app.use(express.static('./client'))
// client是存放前端代码的文件夹
- 6.1.2 使用git拉取后端代码
在服务器的/home 路径下新建一个web文件夹(命名随意)
输入克隆代码 :
git clone git@github.com:XXXXX/xxx.git
// tip:使用git时要配置在GitHub上配置ssh key,要不然会没有权限,无法操作!
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.conf文件。vim /etc/nginx/nginx.conf 这样直接进入nginx配置文件编辑界面。
但是这样编辑不方便,我们可以把文件传输到本地(使用fileZilla),更改之后再传到服务器。
本地使用vscode打开,找到server配置项
step1:在http下新建一个池
upstream pfm_server {
server 127.0.0.1:5000; // 监听后端项目启动的端口
}
step2:监听443端口
server {
listen 443 ssl;
server_name www.xzw999.com xzw999.com;
root /home/web;
ssl on;
ssl_certificate cert/3510965_www.xzw999.com.pem;
ssl_certificate_key cert/3510965_www.xzw999.com.key;
ssl_session_timeout 30m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Proto https;
# add_header Content-Security-Policy upgrade-insecure-requests;
# add_header Strict-Transport-Security "max-age=172800; includeSubDomains";
location / {
proxy_pass http://pfm_server;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
step3: 监听80端口
server {
listen 80;
server_name www.xzw999.com xzw999.com;
rewrite ^(.*)$ https://$host$1 permanent; // 重定向至443端口
location / {
proxy_pass http://pfm_server;
}
}
反向代理就成功啦!
修改完成后传输到服务器,重启nginx服务:
nginx -s reload
一个小技巧,可以使用nginx -t 测试刚刚修改的nginx配置是否可用!
上面nginx.conf配置了https访问。要实现https访问的话要先去阿里云控制台申请一个免费的ssl证书,绑定你的域名。然后下载到本地,再传输到服务器上。放在etc/nginx/cert文件夹下。这样使用ssl_certificate和ssl_certificate_key就能找到相应的.pem 和.key文件。从而可以实现https访问。提升网站的安全性。上面还监听了80端口,目的是让访问重定向至443端口。
流程就这样啦~ 博主按照这样操作是完全成功的哦!谢谢观看
更多推荐
已为社区贡献7条内容
所有评论(0)