300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > React + Node.js + Mysql项目部署到阿里云轻量级应用服务器

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

时间:2022-04-24 05:19:28

相关推荐

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

一、安装Mysql,可外网访问

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

apt-get update

2.安装Mysql-server

apt-get install mysql-serverapt-get isntall mysql-clientapt-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等,大家可以自行尝试.

// 全局安装pm2npm 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: POODLEssl_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 ; // 设置访问的域名或者改为服务器的公网IP地址root /home/React_WEB; // 资源文件的存放路径index index.html;location ~^/favicon\.ico$ {root /home/React_WEB;}location / {try_files $uri $uri/ /index.html;}}}

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。