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

项目简介

最近接了一个朋友的项目，须要作一个导航网站，同时还配套用户登陆自定义导航页面等一些列功能，因此使用react框架和nodejs的express框架以及mysql搭建了一个网站，可是在部署的时候遇到了不少的问题，由于第一次搭建线上环境，这里记录一下本身的部署过程，以及踩的坑。javascript

购买云服务器并登录

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

搭建mysql环境

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

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实现数据库的远程链接html

至此，数据库能够在本地进行远程操控进行导入数据等操做。前端

3.搭建Nodejs环境java

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

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命令以下：mysql

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

在server目录下执行node ./bin/www或者npm start便可执行后台程序，可是若是将命令窗口关闭，那么后台程序就会中止运行，因此须要下载pm2来守护进程react

yum install -y pm2
复制代码

而后能够看到package.json文件中的script命令以下：linux

"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                        # 保存当前应用列表
复制代码

Nginx托管前端

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

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

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

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 # 检测是否安装成功
复制代码

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

启动niginx

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

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

显示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保存并退出

配置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地址进行域名解析,具体以下：

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

域名解析，以后便可用域名访问服务器

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