从零部署你的react博客跟koa后台服务

最新推荐文章于 2022-10-10 15:56:29 发布

weixin_34124939

最新推荐文章于 2022-10-10 15:56:29 发布

阅读量645

点赞数

文章标签： javascript 后端运维 ViewUI

原文链接：https://juejin.im/post/5bcf1e7c5188253310026141

版权

本教程环境

硬件配置：阿里云主机 域名

系统： centos7.4

使用到的软件有：

navicat

xshell5

如果需要购买域名以及服务器请参考我另外一篇文章前半部分：从零搭建nodejs服务器，配置域名解析+https证书（以阿里云linux服务器为例）

1、yum安装必要模块

yum -y install gcc gcc-c++ autoconf pcre-devel make automake
yum -y install wget httpd-tools vim
复制代码

2、配置yum源并安装nginx

sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
复制代码

sudo yum install -y nginx
复制代码

3.正确启动nginx

首次启动的nginx服务，没有正常生成/var/run/nginx.pid文件，原因是阿里云的服务占据了80端口，需要重新启动；

netstat -anp|grep 80 
复制代码

查看找到对应的进程id

kill -9 1671
kill -9 1002

nginx 
重新启动服务
接下来就可以正常使用
nginx -s quit 
nginx -s reload
nginx -s stop

复制代码

然后能够在终端看到网页打印内容

curl localhost 
复制代码

要在浏览器打开显示内容，需要配置阿里云服务器的安全组

直接复制ip到浏览器打开

为了后续方便，设置开机启动nginx

sudo systemctl enable nginx.service
复制代码

4、安装node与npm

首先确保可以访问到EPEL库

sudo yum install epel-release
复制代码

安装node

sudo yum install nodejs
复制代码

安装完成后

node -v
npm -v
能看到版本，证明你安装成功
复制代码

5、安装node常用包

更改使用淘宝源：

npm config set registry https://registry.npm.taobao.org
复制代码

验证配置

npm config get registry
复制代码

全局安装

npm i pm2 webpack vue-cli n yarn -g
复制代码

node -v #发现node的版本为6.x，需要升级一下node，由于我项目用的是nodev8.11.4

n v8.11.4  #升级到8.11.4
复制代码

6、安装上传下载包

um -y install lrzsz

输入sz 回车，会出现弹窗，可以将服务器的文件传到本地。

输入rz 回车，会出现弹窗，可以将本地的文件传到服务器。
复制代码

7、安装mysql

mkdir down && cd soft

mkdir app backup download logs work && cd download

wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm #下载安装需要用到的源
rpm -ivh mysql-community-release-el7-5.noarch.rpm   #安装下载的源
yum install mysql-server #安装mysql
service mysqld start #启动mysql服务
mysql -V 查看版本
复制代码

8.修改mysql密码并配置远程连接

mysqladmin -u root password '密码'  这里我暂时用root
使用命令进入数据库：
mysql -uroot -proot
复制代码

在数据库中终端输入

GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'password' WITH GRANT OPTION;
#第一个是数据库，可以改成允许访问的数据库名称
#第二个 是数据库的表名称，*代表允许访问任意的表
#root代表远程登录使用的用户名，可以自定义
#%代表允许任意ip登录，如果你想指定特定的IP，可以把%替换掉就可以了
#password代表远程登录时使用的密码，可以自定义


flush privileges;
#让命令生效。需要注意的是每行命令的最后要加;，不然是不会执行的
复制代码

输入查询命令来看看最终的结果。

SELECT DISTINCT CONCAT('User: ''',user,'''@''',host,''';') AS query FROM mysql.user;
复制代码

在此之前，我们要先到阿里云安全组里面增加安全规则，否则还是无法远程访问的，就跟前面的http：80端口一样

自己电脑cmd界面远程登录

mysql -h 服务器ip地址 -P 3306 -u root -p密码

客户端登录（使用navicat）在日常开发中也是使用图形界面，方便操作

这里是这个软件的下载地址跟破解补丁 navicat

9、安装git，并且拉取仓库项目

yum install git

git --version #查看版本

mkdir -p /www/git && cd /www/git

git clone https://github.com/jgchenu/JGBlog-Server.git #博客后台仓库
git clone https://github.com/jgchenu/Blog-Web.git #博客管理仓库
git clone https://github.com/jgchenu/Blog-Admin.git ##博客仓库
# 改一下容易拼写的名字，方便上线
mv JGBlog-Server server && mv Blog-Web web && mv Blog-Admin admin
复制代码

10、打包react并启动node服务

这里是web仓库的package.json 的homepage，要修改成你要部署的域名地址作为根目录

admin的仓库也一样同上

建议先将仓库fork到你自己的仓库，然后拉取仓库，修改后重新提交到你自己的仓库，方便后面各种修改。

注意注意注意 在这里要记得！！！

在项目根目录增加pm2.json

{
    "apps": {
        "name": "wuwu",                             // 项目名          
        "script": "./bin/www",                      // 执行文件
        "cwd": "./",                                // 根目录
        "args": "",                                 // 传递给脚本的参数
        "interpreter": "",                          // 指定的脚本解释器
        "interpreter_args": "",                     // 传递给解释器的参数
        "watch": true,                              // 是否监听文件变动然后重启
        "ignore_watch": [                           // 不用监听的文件
            "node_modules",
            "logs"
        ],
        "exec_mode": "fork",                // 应用启动模式，支持fork和cluster模式
        "instances": 1,                             // 应用启动实例个数，仅在cluster模式有效 默认为fork；或者 max
        "max_memory_restart": "500M",                    // 最大内存限制数，超出自动重启
        "error_file": "./logs/app-err.log",         // 错误日志文件
        "out_file": "./logs/app-out.log",           // 正常日志文件
        "merge_logs": true,                         // 设置追加日志而不是新建日志
        "log_date_format": "YYYY-MM-DD HH:mm:ss",   // 指定日志文件的时间格式
        "min_uptime": "60s",                        // 应用运行少于时间被认为是异常启动
        "max_restarts": 30,                         // 最大异常重启次数，即小于min_uptime运行时间重启次数；
        "autorestart": true,                        // 默认为true, 发生异常的情况下自动重启
        "cron_restart": "",                         // crontab时间格式重启应用，目前只支持cluster模式;
        "restart_delay": 10,                      // 异常重启情况下，延时重启时间
        "env": {
           "NODE_ENV": "production",                // 环境参数，当前指定为生产环境 process.env.NODE_ENV
           "REMOTE_ADDR": "爱上大声地"               // process.env.REMOTE_ADDR
        },
        "env_dev": {
            "NODE_ENV": "development",              // 环境参数，当前指定为开发环境 pm2 start app.js --env_dev
            "REMOTE_ADDR": ""
        },
        "env_test": {                               // 环境参数，当前指定为测试环境 pm2 start app.js --env_test
            "NODE_ENV": "test",
            "REMOTE_ADDR": ""
        }
    }
}
复制代码掘金招聘运营经理、内容运

作者：武武
链接：https://juejin.im/post/5b173fa8f265da6e484cf163
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

复制代码

然后在package.json增加

 "pm2": "pm2 start pm2.json" 
复制代码

sudo chmod 777 /www  
#增加对/www目录下的读写权限
cd /www/git/web && yarn
#等待下载完依赖
yarn build #打包
cd /www/git/admin && yarn
yarn build #打包
cd /www/git/server
vim config/index.js #修改数据库的password为你自己设置的密码
yarn  
yarn pm2  #pm2启动服务守护进程，watch选项监听node文件变化会重启node进程 mode 为fork，以上都可以通过修改pm2.json配置

复制代码

11、使用nginx映射服务，以及代理转发

cd /etc/nginx/conf.d
touch web.conf
复制代码

复制下面的配置信息

增加web博客页面nginx配置文件

server {
            listen 80;

            server_name blog.jgchen.xin;

            root /www/git/web/build;

            index index.html;

            location / {
                try_files $uri $uri/ /index.html;
            }

            location /api/ {
                    proxy_pass http://localhost:8000/api/;
           }
            location /upload/{
                    proxy_pass http://localhost:8000/upload/;
            }
           gzip on;
           gzip_buffers 32 4k;
           gzip_comp_level 9;
           gzip_min_length 200;
           gzip_types text/css text/xml application/javascript;
           gzip_vary on;
    }

复制代码

增加admin博客页面nginx配置文件

touch admin.conf
复制代码

复制下面的配置信息

server {
            listen 80;

            server_name admin.jgchen.xin;

            root /www/git/admin/build;

            index index.html;

            location / {
                try_files $uri $uri/ /index.html;
            }

            location /api/ {
                    proxy_pass http://localhost:8000/api/;
           }
            location /upload/{
                    proxy_pass http://localhost:8000/upload/;
            }
           gzip on;
           gzip_buffers 32 4k;
           gzip_comp_level 9;
           gzip_min_length 200;
           gzip_types text/css text/xml application/javascript;
           gzip_vary on;
    }
复制代码

#重新启动下nginx
nginx -t #提示successful
nginx -s reload 
复制代码

11、阿里云配置子域名解析

添加admin.jgchen.xin子域名解析

添加blog.jgchen.xin子域名解析同上。

浏览器打开blog.jgchen.xin

浏览器打开 admin.jgchen.xin

如果需要添加https 请参考我另外一篇文章后半部分：从零搭建nodejs服务器，配置域名解析+https证书（以阿里云linux服务器为例）

最后，一步步编写不易，觉得有帮助，不用打赏，把❤就点亮行，谢谢。

weixin_34124939

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
从零部署你的react博客跟koa后台服务

本教程环境硬件配置：阿里云主机域名系统： centos7.4使用到的软件有：navicatxshell5如果需要购买域名以及服务器请参考我另外一篇文章前半部分：从零搭建nodejs服务器，配置域名解析+https证书（以阿里云linux服务器为例）1、yum安装必要模块yum -y install gcc gcc-c++ autoconf pcre-devel make a...
复制链接

扫一扫