vue3+.net 7web api项目部署发布

项目采用前后端分离的开发方式进行开发,本文主要介绍前后端项目的部署过程,部署采用腾讯云进行部署,前端项目部署于80端口,后端项目部署于5005端口

目录

一、前端项目部署

1、安装nginx

2、将打包好的dist文件上传到服务器的目录例如:/root/www/dist(本文将以这个演示)

3、进入nginx目录 

4、修改nginx中的配置

 5、重启nginx,访问服务器公网IP就可以看到网站了

二、后端项目部署

1、数据库安装

2、.net web api发布

3、将发布后的文件上传到服务器

4、.net 运行


      

一、前端项目部署

前端使用nginx进行部署

1、安装nginx

yum install nginx

2、将打包好的dist文件上传到服务器的目录例如:/root/www/dist(本文将以这个演示)

3、进入nginx目录 

cd /etc/nginx

4、修改nginx中的配置

vim nginx.conf

 配置中的用户也修改

user nginx 

把nginx换成root

server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        location / {
           root /root/www/dist;
           index index.html index.html;

        }
        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

 5、重启nginx,访问服务器公网IP就可以看到网站了

二、后端项目部署

1、数据库安装

本文示范的是mariadb数据库,根据以下教程就可以完成安装

(12条消息) Linux在线安装mysql57-community-release-el7-10.noarch.rpm_记忆工厂的博客-CSDN博客

2、.net web api发布

 发布的方式选择本地文件夹

3、将发布后的文件上传到服务器

4、.net 运行

     安装sdk

 

 

 现在已经有了dotnet运行环境,接下来设置自启动让webapi项目可以自行运行

 配置文件代码(dotnet运行的路径需要改成你的项目上传到服务器的位置)

[Unit]
Description=ASPNET Core webapi
[Service]
User=root
Group=root
WorkingDirectory=/usr/data/zyxx_webApi
ExecStart=/usr/bin/dotnet /usr/data/zyxx_webApi/zyxx_glxt.dll --urls=http://172.24.131.158:5005
Restart=always
RestartSec=10
SyslogIdentifier=netcore-demo
Environment=ASPNETCORE_ENVIRONMENT=Production
[install]
WantedBy=muti-user.target
~
~
~
~
~

  

 

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 3.0 和 ASP.NET Core WebAPI 都支持动态路由,实现起来也比较简单。 首先,在 ASP.NET Core WebAPI 中,我们需要在 Startup.cs 中配置路由。可以使用以下代码: ``` app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller}/{action}/{id?}"); }); ``` 这个配置会将请求转发到对应的控制器和方法中。其中,{controller} 和 {action} 表示控制器和方法名,{id?} 表示可选参数。 接着,在 Vue 3.0 中,我们可以使用 vue-router 实现动态路由。可以使用以下代码: ``` const router = createRouter({ history: createWebHistory(), routes: [ { path: '/:controller/:action/:id?', name: 'dynamic', component: DynamicComponent } ] }) ``` 这个配置会将请求转发到 DynamicComponent 组件中。其中,:controller、:action 和 :id? 表示控制器、方法名和可选参数。 最后,我们可以在 DynamicComponent 组件中调用 ASP.NET Core WebAPI 中的动态路由。可以使用以下代码: ``` axios.get(`/api/${this.$route.params.controller}/${this.$route.params.action}/${this.$route.params.id}`) .then(response => { // 处理响应 }) .catch(error => { // 处理错误 }) ``` 这个代码会发送请求到对应的控制器和方法中,其中,this.$route.params.controller、this.$route.params.action 和 this.$route.params.id 分别对应控制器、方法名和参数。 以上就是 Vue 3.0 和 ASP.NET Core WebAPI 实现动态路由的基本步骤。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值