首页 > itarticle > React+Nodejs+Mysql搭建网站及云服务器部署

React+Nodejs+Mysql搭建网站及云服务器部署

admin 12月 07, 2021 0

项目简介

最近接了一个朋友的项目，需要做一个导航网站，同时还配套用户登录自定义导航页面等一些列功能，所以使用react框架和nodejs的express框架以及mysql搭建了一个网站，但是在部署的时候遇到了很多的问题，因为第一次搭建线上环境，这里记录一下自己的部署过程，以及踩的坑。

  1. 购买云服务器并登陆

这里使用的是阿里云的服务器，linux系统，CentOS 7，远程连接工具使用的是云服务器自带的Workbench远程连接，当然也可以使用Xshell等或者本地的cmd等远程接连工具，文件上传使用的是Xftp。

image.png

  1. 搭建mysql环境

使用CentOS7自带的yum命令来安装,

yum install mariadb-server mariadb # 安装数据库
systemctl start mariadb # 启动数据库
复制代码
mysql -u root -p -- 初始密码为空，直接回车即可
mysql> set password for 'root'@'localhost' =password('你的密码'); --设置数据库密码
复制代码
vim /etc/my.cnf # 使用vim命令打开mysql的配置文件
default-character-set =utf8 # 在配置文件后面后面加上编码方式
复制代码
--把在所有数据库的所有表的所有权限赋值给位于所有IP地址的root用户
mysql> grant all privileges on *.* to root@'%'identified by 'password';
复制代码

接下来使用navicate12实现数据库的远程连接

image.png

image.png

至此，数据库可以在本地进行远程操控进行导入数据等操作。

3.搭建Nodejs环境

首先去nodejs官网下载nodejs的压缩包，找到云服务器系统对应的版本，下载好之后使用xftp放到云服务器的根目录下

tar -xvf node-v12.4.0-linux-x64.tar.xz #解压Node.js的安装包
mv node-v12.4.0-linux-x64/ /usr/local/node  # 重命名Node.js安装目录
# 将Node.js的可执行文件目录加入到系统环境变量中
echo "export PATH=$PATH:/usr/local/node/bin" >> /etc/profile 
source /etc/profile # 使刚配置的Node.js环境变量立即生效。
# 查看node和npm版本
node -v
npm -v
复制代码

至此，nodejs后台环境搭建完成。
接下来，将node后台项目全部文件放入server文件夹中，注意node_modules文件夹不要复制，然后在服务器的控制台cd到server目录下，npm install来进行安装相关的依赖包。
关于node后台项目的搭建，以及目录架构等详细内容将在另一篇文章中讲到
此时node项目中package.json文件中的script命令如下：

"scripts": {
    "start": "node ./bin/www",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
复制代码

在server目录下执行node ./bin/www或者npm start即可执行后台程序，但是如果将命令窗口关闭，那么后台程序就会停止运行，所以需要下载pm2来守护进程

yum install -y pm2
复制代码

然后可以看到package.json文件中的script命令如下：

"scripts": {
    "start": "node ./bin/www",
    "prd": "pm2 start ./bin/www",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
复制代码

可以发现对应的prd命令如下：所以需要执行的命令为:

pm2 start ./bin/www --watch
复制代码

其中--watch为监听后端项目的改变动态更新后端程序
通过pm2 list命令查看,发现status状态为online。到此，后端项目部署完成
常用的pm2命令：

$ pm2 start app.js                # 启动app.js应用程序
$ pm2 start app.js --name="api"   # 启动应用程序并命名为 "api"
$ pm2 start app.js --watch        # 当文件变化时自动重启应用
$ pm2 start script.sh             # 启动 bash 脚本
$ pm2 list                        # 列表 PM2 启动的所有的应用程序
$ pm2 monit                       # 显示每个应用程序的CPU和内存占用情况
$ pm2 show [app-name]             # 显示应用程序的所有信息
$ pm2 logs                        # 显示所有应用程序的日志
$ pm2 logs [app-name]             # 显示指定应用程序的日志
$ pm2 flush                       # 清空所有日志文件
$ pm2 stop all                    # 停止所有的应用程序
$ pm2 stop 0                      # 停止 id为 0的指定应用程序
$ pm2 restart all                 # 重启所有应用
$ pm2 reload all                  # 重启 cluster mode下的所有应用
$ pm2 delete all                  # 关闭并删除所有应用
$ pm2 delete 0                    # 删除指定应用 id 0
$ pm2 startup                     # 创建开机自启动命令
$ pm2 save                        # 保存当前应用列表
复制代码
  1. Nginx托管前端

首先检查服务器是否安装了GCC

yum list installed | grep "gcc" # 可在任意目录下输入
复制代码

出现下图，则说明GCC已安装
image.png

yum -y install gcc # 安装GCC
yum -y install gcc pcre-devel zlib-devel openssl openssl-devel # 安装nginx所需的依赖插件
wget https://nginx.org/download/nginx-1.16.1.tar.gz #下载nginx安装压缩包
tar -zxvf nginx-1.16.1.tar.gz # 解压，需要和下载文件相同目录,推荐放在根目录下
./configure --prefix=/usr/local/nginx # 进行配置
make
make install # 依次输入
cd /usr/local/nginx/sbin
nginx -t # 检测是否安装成功
复制代码

image.png

显示如上图所示则表示安装成功

  • 启动niginx

cd /usr/local/nginx/sbin到当前目录下

./nginx # 启动nginx
netstat -tunpl|grep nginx # 查看nginx是否启动成功
复制代码

image.png
显示80端口开启，则表示nginx启动成功

  • 停止，重启nginx

cd /usr/local/nginx/sbin到当前目录下

./nginx -s stop # 第一种方法
复制代码
//第二种，先netstat -tunpl|grep nginx查看80端口的进程号，然后使用kill命令杀死这个进程
netstat -tunpl|grep nginx
kill -9 '80端口的进程号'
//最后在输入netstat -tunpl|grep nginx，确认80端口被杀死了。
netstat -tunpl|grep nginx
复制代码
./nginx -s reload # 重启
复制代码
  • nginx开机自启动

vim /etc/rc.d/rc.local 使用vim命令打开对应文件
输入i进入linux文件输入模式
在对应位置添加如下路径/usr/local/nginx/sbin/nginx
按ese键退出输入模式，输入:wq保存并退出

image.png

  • 配置nginx

cd /usr/local/nginx/conf到该目录下
vim nginx.conf进入该文件

user  root; # 设置nginx启动用户和系统用户一致，防止出现403 
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;

    # 开启gzip压缩,能够大幅提高网站的访问速度
    gzip on; 
    gzip_min_length 1k;
    #gzip_disable "msie8";

    # gzip_vary on;
    # gzip_proxied any;
    gzip_comp_level 4;
    gzip_buffers 4 16;
    gzip_http_version 1.1;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    # 开启gzip压缩

    server {
        # 重要配置项
        listen       80; #监听端口
        server_name  www.tik128.com;# 转发的域名
        root         /root/www;# 项目文件的根目录
        index        index.html;# index主页文件名称
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location ~^/favicon\.ico$ {
        root /root/www;
        }
        location / {
        try_files $uri $uri/ /index.html;
        }
        # 重要配置项

        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}
        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
复制代码

修改完成之后保存并重启nginx即可

nginx配置文件相关参数解读

  • server：server为一个端口的监听配置，里面可以拥有多个location路由配置。一个server是一个大单元。你可以复制多个server来监听不同端口或相同端口不同域名（server_name）
  • server_name：监听的主机名。可以是域名。比如aaa.dongzhongwei.com和bbb.dongzhongwei.com，虽然都是走的80端口，但可以通过server_name来区分不同的server。
  • listen：监听80端口
  • client_max_body_size： 附件上传支持最大容量。默认1M，超出则报413附件太大错误。（该配置好像可以写在location里面。）
  • location： 监听端口下的路由。/为监听根路径
  • location.proxy_pass： 转发的路径。即将127.0.0.1:80/转发到localhost:6606/。或者如127.0.0.1:80/test转发到localhost:8080/testabc
  • location.proxy_redirect：是否转发方式。off否

location配置规则(优先级)

 (localtion =) > (localtion完整url) > (localtion ^~) > (localtion ~,~*) > (lcoaltion部分起始路径) > (/)
    = 表示精确匹配
    ^~ 表示指定的路径开头
    ~ 表示区分大小写的正则匹配
    ~* 表示不区分大小写的正则匹配
    / 通用匹配,所有的URL都是以此为开头
ex:
location ^~ /static/ {
   #规则1
}
location ~ \.(gif|jpg|png|js|css)$ {
   #规则2
}
location ~* \.png$ {
   #规则2
}
//http://xdh.com/static/a.png 优先匹配到规则1，则不匹配后面的规则
//http://xdh.com/a.png 匹配到规则2
复制代码

在nginx配置完成之后，将本地开发环境下的react项目文件使用webpack进行打包，并将dist目录下的文件拷贝到/root/www文件夹下，然后即可通过域名进行访问

通过域名进行访问， 还需要在阿里云的安全组中配置对外开放的端口，并将服务器的IP地址进行域名解析,具体如下：

配置安全组对外开放端口:

image.png

image.png

域名解析，之后即可用域名访问服务器

image.png

最后，附上项目的网址 tik128.com

微海报分享

近期文章

近期评论

标签

热门

文章归档

分类目录

功能