React + Node.js + Mysql项目部署到阿里云轻量级应用服务器

最新推荐文章于 2024-09-10 19:04:52 发布

DepressedPrince

最新推荐文章于 2024-09-10 19:04:52 发布

阅读量4.8k

点赞数 3

分类专栏：项目部署

本文链接：https://blog.csdn.net/depressedprince/article/details/80245855

版权

项目部署专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、安装Mysql，可外网访问

1. 更新系统【在root用户下】

apt-get update

2.安装Mysql-server

apt-get install mysql-server
apt-get isntall mysql-client
apt-get install libmysqlclient-dev

注：若是安装出现问题，参考博客：点击打开链接，当然我在安装的时候没有出现任何问题，祝各位也一切顺利！

3.查询是否安装成功

netstat -tap | grep mysql

4.使用客户端远程链接

默认情况下，不能用客户端远程连接的，阿里云提供的help.docx里面做了设置说明，mysql密码默认存放在/alidata/account.log

// 登录数据库
mysql -u root -p
// 输入数据库的密码
Enter Password：
// 为root用户授予全部权限 （实际的语句写法有很多，诸君可自行百度）
grant all on *.* to 'root'@ '%'   identified  by '数据库密码' with grant option
// 刷新列表，使得修改权限生效
flush privileges

# 数据库启动
service mysql start
# 数据库停止
service mysql stop
# 数据库重启
service mysql restart

客户端工具我使用的是Navicat，其实这个客户端工具是个人选择，看诸君个人的喜好。

二、部署Node项目

其实再实际操作前，我对于如何部署后台项目可谓是一窍不通，但在网上查看了许多文档后，总算明白了。其实部署，说到底就是将后台项目放置在自己的阿里云服务器上，并且让它一直处于运行状态，这样就可以前端的Web项目就可以一直访问了，是不是很简单，那么就介绍一下具体步骤：

1.安装Node和npm

安装步骤网上有很多，大家可以自行百度查看，附上阿里云的官方文档：点击打开链接，在该教程里还让安装版本管理nvm，方便后期长期进行node版本管理，但因为笔者在进行部署的时候也是菜鸟一枚，没想过要长期管理，所以没有安装，当然页完全不影响后面的部署

2.首先将Node项目放在服务器上

Node项目和后台的Java代码不一样，不需要编译，直接进行上传就可以，所以我才用的懒人的办法——使用git

// 安装git  （这里是本人的安装，如需更高版本的安装，请自行百度）
apt-get install git

安装成功后，就可以按照以往的git操作命令，将Node项目克隆到服务器上

3.启动Node项目

如果是直接使用node app.js 或者 npm start启动项目，那么在关闭连接后，项目的启动也会停止，所以我们需要使用让Node项目能够一致在后台自行运行，在这里我使用的是PM2管理工具，当然还有forever等，大家可以自行尝试.

// 全局安装pm2
npm install -g pm2

安装成功后就进入运行pm2命令，运行Node项目，我这里的项目是Express，首先启动的是bin/www下的文件，所以在使用时先进入Node项目下，然后运行 pm2 start bin/www 来启动项目。其实pm2还有很多用途，详细的命令，附上参考文档。

【注意】在部署服务器前，需要将监听的地址改为0.0.0.0，具体原因，嗯~ o(*￣▽￣*)o，笔者没有细究。

找到Node项目下bin/www 文件，找到监听的地方

可见，监听的地址是由onListening函数来处理的，找到这个函数进行修改

三、部署React项目

部署前端项目，我采用的是最为简单nginx，只需要安装好nginx，配置好配置文件nginx.conf，然后将打包好的文件丢到服务器上就可以，听上去是不是很简单，那么就实践操作一下吧。

1.上传打包好的资源文件

在本地执行npm run build命令后，将dist文件夹中的资源文件上传到服务器，我上传使用的是rz和sz命令，大家可以自行百度如何安装，当然你也可以选择自己熟悉的上传方式，反正只要上传成功就行。

我是在/home/React_WEB中存放资源文件，这个路径很重要，关系到后续的nginx配置

2.安装nginx

apt-get install nginx

3.配置nginx

要配置nginx就需要先了解配置文件的基本属性，附上参考文档。

了解nginx的基本配置属性后，我们发现其实只需要修改配置文件/etc/nginx/nginx.conf中修改http部分，设置其中的Server属性，配置虚拟主机，主要就是设置监听的端口，资源的访问地址等，我的配置比较简单，参看下图：（仅供参考）

user www-data;
worker_processes auto;
pid /run/nginx.pid;

events {
	worker_connections 768;
	# multi_accept on;
}

http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 65;
	types_hash_max_size 2048;
	# server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##
	# SSL Settings
	##

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	##
	# Gzip Settings
	##

	gzip on;
	gzip_disable "msie6";

	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
        // 原本这个文件是要引入sites-enabled的文件夹下面的默认配置文件，我这里是将其注释掉，然后直接在nginx.conf文件里写
	# include /etc/nginx/sites-enabled/*;
	server {
		listen 80;  // 监听的端口
		server_name whsjblog.com;   // 设置访问的域名或者改为服务器的公网IP地址
		root /home/React_WEB;    // 资源文件的存放路径
		index index.html;     
		location ~^/favicon\.ico$ {
			root /home/React_WEB;
		}
		location / {
			try_files $uri $uri/ /index.html;
		}
	}
}

配置成功后，只需要在地址栏输入域名和服务器的外网IP地址就可以访问了。