Ubuntu部署.net项目与React前端项目(前后端分离项目的部署)

13 篇文章 1 订阅

在Ubuntu18.04上部署一个前后端分离的项目,前端框架采用的是react全家桶,后端则是.Net Core编写的接口平台。

进入正题之前,个人觉得有必要说明一点:应用的部署,首要工作是给其提供一个可运行环境(如SDK),其次是对其配置文件按需配置(.conf修改),最后一般是系统为了方便管理该应用的配置(如自启动)。同一应用的不同环境,需配置不同的部署参数,甚至不同的部署方法。比如日常环境通过容器服务部署,而正式环境通过脚本部署。

部署.Net Core应用

主要分为4个步骤:

  1. 安装.Net Core应用程序运行的环境基础;
  2. 运行.Net Core应用程序;
  3. 通过nginx配置反向代理,并将nginx设为开机自启动;
  4. 最后为了方便管理和操作,通过supervisor将占据终端窗口的.Net Core程序变为后台守护进程,再将supervisor设为开机自启动即可。

1.安装.Net Core SDK

两种方法都可以,若一不行则用第二个。

方法一

以下命令组中有两个占位符。

  • {dotnet-package}
    此项表示要安装的 .NET Core 包,如 aspnetcore-runtime-2.1。 此项在以下 sudo apt-get install 命令中使用。
  • {os-version}
    此项表示你所使用的 Linux 版本,如ubuntu18.04则填写18.04即可。 此项在以下 wget 命令中使用。
sudo apt-get install -y gpg
wget -O - https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor -o microsoft.asc.gpg
sudo mv microsoft.asc.gpg /etc/apt/trusted.gpg.d/
wget https://packages.microsoft.com/config/ubuntu/{os-version}/prod.list
sudo mv prod.list /etc/apt/sources.list.d/microsoft-prod.list
sudo chown root:root /etc/apt/trusted.gpg.d/microsoft.asc.gpg
sudo chown root:root /etc/apt/sources.list.d/microsoft-prod.list
sudo apt-get update; \
  sudo apt-get install -y apt-transport-https && \
  sudo apt-get update && \
  sudo apt-get install -y {dotnet-package}

方法二

如果上述报网络连接等问题错误,用下面这段 ubuntu18.04 装dotnet-sdk-2.1

wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.asc.gpg
sudo mv microsoft.asc.gpg /etc/apt/trusted.gpg.d/
wget -q https://packages.microsoft.com/config/ubuntu/18.04/prod.list
sudo mv prod.list /etc/apt/sources.list.d/microsoft-prod.list


sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install dotnet-sdk-2.1

输入dotnet查看安装成功与否:
在这里插入图片描述
至此,表示.Net Core SDK安装成功。

2.发布应用

创建项目目录

选取服务器某一空文件夹作为网站应用的根目录。我选取的是:/home/wwwroot

mkdir -p /home/wwwroot

拷贝项目

通过XFTP工具将本地已经编译好的网站应用程序传输到服务器 /home/wwwroot 目录下。

如果传输出错,将文件夹权限设置为777,具体命令: chmod 777 /home/wwwroot

在这里插入图片描述

启动项目

进入 /home/wwwroot 目录,输入启动网站程序的命令dotnet BVRWebapi.dll,BVRWebapi.dll是项目的启动文件。

在这里插入图片描述
dotnet默认端口为5000,亦可使用:dotnet xxx.dll -p 端口号,例:dotnet helloworld.dll -p 8080,那么就会监听8080端口。

✿疑惑✿

当前窗口已经被dotnet占据,然后我再开启一个终端,并把打开防火墙的5000端口。以为如此便可直接在客户端访问该网站了。实际却是这样的:
在这里插入图片描述
telnet 该端口也是不通的,服务器中其他开启的端口都可以telnet通,唯独这个不可以!

再仔细看下启动信息,Now listening on http://localhost:5000 ,说明该程序限制了只能采用localhost该域名访问这个程序,故采用服务器ip是不可访问到该服务的。

然后检查发现是启动文件设置了指定url:可以更改指定url,也可以通过反向代理来实现!
在这里插入图片描述

我就通过反向代理配置,将该端口映射到服务器其它对外开放的端口。

3.Nginx配置反向代理

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,很适合用来做负载均衡。

刚才的网站程序启动的端口是5000,可以借助 Nginx 把程序5000端口映射到其它端口。

安装Nginx

sudo apt-get install nginx

配置Nginx

进入nginx的配置文件夹目录下,创建对应网站的配置文件。

配置文件常用的命名规则:项目名+二级域名+端口.conf
nginx的配置文件夹:/etc/nginx/conf.d

1.添加创建网站配置文件netcore.conf

touch /etc/nginx/conf.d/netcore.conf

2.编辑网站配置文件

vim /etc/nginx/conf.d/netcore.conf
server {
    listen 8073;
    location / {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection keep-alive;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

3.重新加载nginx配置文件,使配置文件生效

nginx -s reload

4.防火墙开启端口

我是在内网使用的,防火墙没有开启。大家可以通过ufw等自行配置规则。
在这里插入图片描述

注意:如果需要使用80端口,则需要在nginx.conf中注释掉80的server配置,因为nginx默认使用了80作为测试端口。
在这里插入图片描述

设置Nginx开机自启动

1.进入/etc/systemd/system目录创建服务文件

root@bvr3000:/etc/systemd/system# touch nginx.service

2.找到配置文件位置

updatedb

locate nginx.conf
/etc/nginx/nginx.conf

3.找到启动文件位置

locate sbin/nginx
/usr/sbin/nginx

4.修改nginx.service,vim nginx.service

Description=nginx - high performance web server
After=network.target remote-fs.target nss-lookup.target
[Service]
Type=forking
ExecStart=/usr/sbin/nginx -c /etc/nginx/nginx.conf
ExecReload=/usr/sbin/nginx -s reload
ExecStop=/usr/sbin/nginx -s stop
[Install]
WantedBy=multi-user.target

5.使配置生效

systemctl daemon-reload

6.设置允许开机自启动:

systemctl enable nginx.service

7.验证成功与否:

systemctl is-enabled nginx

输出enable则配置成功。

4.Supervisor配置守护进程

Supervisor 是用 Python 开发的 Linux/Unix 系统下的一个进程管理工具。它可以使进程脱离终端,变为后台守护进程(daemon)。实时监控进程状态,异常退出时能自动重启。它是通过fork/exec的方式把这些被管理的进程当作supervisor的子进程来启动,这样只要在supervisor的配置文件中,把要管理的进程的可执行文件的路径写进去即可。

其主要组成部分:

supervisord:Supervisor 的守护进程服务,用于接收进程管理命令;

supervisorctl:Supervisor 命令行工具,用于和守护进程通信,发送管理进程的指令;

安装supervisor

apt-get install supervisor

supervisor配置文件默认位置:/etc/supervisor/supervisord.conf
子进程配置文件路径默认位置:/etc/supervisor/supervisord.d/

注:默认子进程配置文件为ini格式,可在supervisor主配置文件中修改为conf等后缀名。

修改主配置文件

默认子进程配置文件为ini格式,在supervisor主配置文件中修改为conf后缀名,并指定新的子配置文件夹。

打开主配置文件supervisord.conf末尾找到以下片段:

;[include]
;files = relative/directory/*.ini

改成:

[include]
files = conf.d/*.conf

设置子进程配置的文件夹conf.d,配置文件为以.conf结尾的文件。

创建子进程配置的文件

创建子进程配置的文件夹conf.d,并添加子配置文件netcore.conf(.net项目启动信息):

mkdir -p /etc/supervisor/conf.d
cd /etc/supervisor/conf.d
touch netcore.conf

netcore内容如下(注意:配置项需要根据你实际修改写入):

[program:BVRWebapi]                        ;自定义进程名称
command=dotnet BVRWebapi.dll               ;程序启动命令
directory=/home/wwwroot                         ;命令执行的目录
autostart=true                                  ;在Supervisord启动时,程序是否启动
autorestart=true                                ;程序退出后自动重启
startretries=5                                  ;启动失败自动重试次数,默认是3
startsecs=1                                     ;自动重启间隔
user=root                                       ;设置启动进程的用户,默认是root
priority=999                                    ;进程启动优先级,默认999,值小的优先启动
stderr_logfile=/var/log/WebApplication1.err.log  ;标准错误日志
stdout_logfile=/var/log/WebApplication1.out.log  ;标准输出日志
environment=ASPNETCORE_ENVIRONMENT=Production   ;进程环境变量
stopsignal=INT                                  ;请求停止时用来杀死程序的信号

启动supervisor服务

supervisord -c /etc/supervisor/supervisord.conf
或
systemctl restart supervisor.service 

Supervisor 服务启动后,受其管理的进程会在后台运行。可以通过supervisorctl客户端管理进程。

输入如下命令进入supervisorctl交互终端,按Ctrl+C键或者输入exit退出:
在这里插入图片描述

配置supervisor开机自启动

1.进入/etc/systemd/system目录创建服务文件:

root@bvr3000:/etc/systemd/system# touch supervisor.service

2.修改配置文件:vim supervisor.service

[Unit]
Description=Supervisor daemon

[Service]
Type=forking
ExecStart=/usr/bin/supervisord -c /etc/supervisor/supervisord.conf
ExecStop=/usr/bin/supervisorctl $OPTIONS shutdown
ExecReload=/usr/bin/supervisorctl $OPTIONS reload
KillMode=process
Restart=on-failure
RestartSec=42s

[Install]
WantedBy=multi-user.target

3.设置允许开机自启动:

systemctl enable supervisor

4.验证成功与否:

systemctl is-enabled supervisor

输出enable则配置成功。

部署React应用

1.安装nodejs

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs

2.安装serve服务

通过npm包安装工具,安装serve服务,raect项目需要通过serve服务启动。

npm install -g serve

3.发布应用

移植React项目到服务器

通过xftp工具将编译后的react项目复制到服务器某一空文件夹,我选取的是/home/gxriver (具体与.net core移植相同,不累赘)

启动项目

cd /home/gxriver
serve -s -d -n -l 8072 (8072 是指定的端口号)

在这里插入图片描述

至此,你可以在客户端通过ip:port打开该react项目,但若项目中配置了代理请求的话,还需要通过nginx配置反向代理,在nginx子配置目录创建配置文件(gxriver是我的react项目)

4.配置反向代理

进入nginx子配置文件夹/etc/nginx/conf.d,新建配置文件gxriver.conf

touch /etc/nginx/conf.d/gxriver.conf

输入内容:

server {
    listen 8071;
    server_name  10.3.40.59;
    location / {
        proxy_pass http://10.3.40.59:8072;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection keep-alive;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
     location /api/ {
             proxy_pass http://10.3.40.59:8073/api/;          
    }
     location @router {
        rewrite ^.*$ /index.html last;
    }
}

server_name 10.3.40.59;服务器内网ip。根据自己需求配置即可

注意:不要设置为listen 8072;虽然是在8072端口启动了该网站应用,但配置反向代理的时候要将它区别出来,否则会造成端口冲突,一方面是网站应用占据了8072,另一方面nginx代理又要开启一个叫做8072的端口来侦听8072端口,导致客户端网站无法正确请求,虽然返回200,但是页面没有发生跳转。

重新加载nginx配置文件

nginx -s reload

5.supervisor管理网站

部署过程与部署.Net Core项目过程一样

cd /etc/supervisor/conf.d
touch gxriver.conf

gxriver内容如下(注意:配置项需要根据你实际修改写入):

[program:gxriver]                        ;自定义进程名称
command=serve -s -d -n -l 8072              ;程序启动命令
directory=/home/gxriver                         ;命令执行的目录
autostart=true                                  ;在Supervisord启动时,程序是否启动
autorestart=true                                ;程序退出后自动重启
startretries=5                                  ;启动失败自动重试次数,默认是3
startsecs=1                                     ;自动重启间隔
user=root                                       ;设置启动进程的用户,默认是root
priority=999                                    ;进程启动优先级,默认999,值小的优先启动
stderr_logfile=/var/log/WebApplication1.err.log  ;标准错误日志
stdout_logfile=/var/log/WebApplication1.out.log  ;标准输出日志
environment=ASPNETCORE_ENVIRONMENT=Production   ;进程环境变量
stopsignal=INT                                  ;请求停止时用来杀死程序的信号

重启一下supervisor服务

supervisord -c /etc/supervisor/supervisord.conf
或
systemctl restart supervisor.service 

客户端访问IP:8071即可正常访问。

至此,整个项目前后端项目部署完成。

=======================================================================

参考文档:
在 Ubuntu 上安装 .NET Core SDK 或 .NET Core 运行时
linux发布 .netcore应用
react 项目部署启动的方法

  • 2
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

Free Joe

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值