基于阿里云CentOs 7.x下搭建前后端分离web服务器

 

前言 

  

流程

  1. 租用阿里云t5服务器一台

  2. 远程连接服务器

  3. 服务器中安装node

  4. 安装express库,初始化项目

  5. 修改安全组允许或者修改监听端口

  6. 将views从jade改为html

  7. 在index.html中请求接口

  8. 安装mysql

  9. nginx分离部署前后端代码

一、租用阿里云服务器

  推荐阿里云t5类型ECS服务器,具体配置根据财力评估(例如1核1Gib,1Mb固定带宽),一般选择CentOs 7.x的系统镜像即可

二、连接服务器

  mac直接终端

ssh [用户名]@[服务器公网IP] 

成功连接会提示输入密码,如下:

这里是使用root账户访问,访问成功会提示Welcome to Alibaba Cloud Elastic Compute Service !

三、服务器中安装node

  利用yum在CentOs中安装node,原先安装的具体命令忘记了,这里贴一段他人的代码,首先

curl --silent --location https://rpm.nodesource.com/setup_10.x | sudo bash
sudo yum -y install nodejs

查看是否安装成功

node -v

大概步骤如上,也可以去node官网,选择node源码包下载到服务器,解压

在安装node之前,我曾安装apache服务为静态网页导航

首先apache在linux系统里的名字是httpd,依旧利用yum安装,yum install httpd -y ,-y意味自动同意安装过程中的yes/no选择

yum install httpd -y

可以利用如下命令查看是否安装了httpd,rpm -qa httpd

 rpm -qa httpd  

安装完成之后就是启动了 service httpd start

service httpd start

当然停止服务的命令自然是 service httpd stop ,以及重启命令 service httpd restart

service httpd stop
service httpd restart

当然中间会出现一些常见问题,配置信息错误又或者端口被占用,阿里云服务器的默认端口为80,可以查看这个博客的解决方案

四、安装express库

  这个就简单了,cd到你的目标路径,然后npm init初始化一下,让目录下自动构建package.json文件,然后npm i express -S

npm i express -S

然后安装一下express框架快速生产器npm install express-generator -g

npm install express-generator -g

这下可以直接初始化项目express [项目名称] ,然后安装依赖npm i

express [项目名称]
npm i

完成后想让项目跑起来自然是 npm start,命令可在package.json中查看

 npm start

项目就跑起来啦

五、修改安全组允许或者修改监听端口

  上一步虽然跑起来了,但是没发从外部访问,因为express默认端口是3000,这在阿里云服务器的默认安全组中是没有的,所以就需要我们去安全组中添加3000端口的外网连接允许,在阿里云官网的控制台找到自己的ECS服务器,选择安全组-添加安全组规则,如下:

这下通过域名/ip:3000就能访问到了页面了,默认是一个express的页面。

但是这样我们还不能满足,哪有天天带端口号访问的,所以我们需要修改express的默认端口为80(前面提到的阿里云服务器默认端口80),进入到项目下/bin/www文件中修改端口号

又或者修改运营命令为 "start": "set PORT=80 && node ./bin/www"

这样运行项目后就可以不带端口号访问。

六、将views从jade改为html

  express默认views试图为jade,这对于前端前端很陌生,所以我们需要修改一下,npm i ejs --save 安装ejs

npm i ejs --save

app.js中

// app.js
var ejs = require('ejs');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'jade');
app.engine('.html', ejs.__express)
app.set('view engine', 'html');

将views下的文件都删除,添加index.html和error.html,在运行项目就可以了

当然我们肯定想服务器时刻运行着项目,支持实时访问,我选择pm2(node进程管理工具)来帮忙,首先安装pm2

npm install -g  pm2
pm2 -v

然后就是pm2运行项目 pm2 start ./bin/www

pm2 start ./bin/www

这样就OK了

七、在index.html中请求接口,基础版完成

  前面一直没提到我的代码怎么上传到服务器。

  一开始是选择filezilla-sftp进行代码同步到服务器,对于少部分文件的更新是没有问题的,但是当更新的文件较多时,难免会有遗漏,此时就想到了程序员必备git,所以在git创建了仓库,服务器安装git(这个就自己百度吧),到此代码管理也配上了。

  在index.html中发送请求就很简单了,现在app.js中设置好接口地址

  接下来index.html中的

打开页面

八、安装mysql

   首先先检查是否已经安装数据库了

 rpm -qa | grep mysql

如果有就需要全部卸载了,类似下面

yum -y remove mysql-libs.x86_64

然后安装mysql的源

wget http://repo.mysql.com/mysql57-community-release-el7-8.noarch.
rpm -ivh mysql57-community-release-el7-8.noarch.rpm

然后就是安装mysql啦

yum install mysql-server

这步很容易出错,就是mysql的依赖问题,试了很多方法,最后请看这位大佬的丨不學無術丨,圆满的解决了我的bug

之后就是数据的连接,一开始没有密码需要重设密码,默认密码要求较高,在之后就是建库建表

mysql -u[用户名]

接下来,你不想每次查看数据库都要手动连接服务器的话可以使用mysql图形化工具,比如MySql Workbanch,安装之后如下

当然在连接之前千万别忘记设置mysql远程连接的许可,我这里设置,所有ip都可以访问,也可以限定ip,把下面命令中的%替换成指定ip即可

GRANT ALL PRIVILEGES ON [数据库名或者*].* TO '登录名'@'%' IDENTIFIED BY '登录密码' WITH GRANT OPTION;

FLUSH   PRIVILEGES;

九、nginx分离部署前后端代码

  看着前后端代码放在一起是不是很合适,所以我安装了nginx来处理这块,nginx安装步骤九不贴了,又是一系列命令

  nginx安装后,我们需要修改nginx配置,看看这个传送门,如果改完nginx启动报错可以试试

nginx -c -s reload

  到此一个前后端分离的服务器就完成了

发布了4 篇原创文章 · 获赞 3 · 访问量 816

猜你喜欢

转载自blog.csdn.net/weixin_41484544/article/details/105547084