Ubuntu 使用nginx部署agular项目

我的front-end是用的webpack,就直接执行的npm run build打包。

完成之后就可以\target\classes\static找到 ,直接把整个static上传到需要部署的地方就可以了。

当然这个打包output路径也是angular.json配置好了的

bash 复制代码
sudo apt update
sudo apt install nginx

安装完成之后查看一下状态

bash 复制代码
sudo systemctl status nginx

接下来新建项目配置文件,这个your_project就改成你的需要的名字

bash 复制代码
sudo nano /etc/nginx/sites-available/your_project 

然后修改配置,修改需要发布的端口,修改你项目打包好的地址,然后我还配置了一个代理,/api开头的都会被代理到5000端口。

python 复制代码
server {
    listen 9001;
    server_name 0.0.0.0;

    root /home/deploy-user/project_code/target/classes/static;  # 这里指定了你的项目文件所在的目录
    index index.html index.htm;  # 默认索引文件

    # 其他配置...

    location /api {
        proxy_pass http://localhost:5000;
    }

    # 其他location块...
}

创建符号链接以启用配置

bash 复制代码
sudo ln -s /etc/nginx/sites-available/your_project /etc/nginx/sites-enabled/  

然后执行检查配置是否正确

bash 复制代码
sudo nginx -t

看到这个就说明没问题了

然后就可以重启nginx了

bash 复制代码
sudo systemctl reload nginx  

然后就去浏览器访问你的ip+port就行了

相关推荐
嵌入式学习和实践7 小时前
虚拟机 Ubuntu 磁盘扩容完全指南:从原理到实践,一步到位
linux·ubuntu·磁盘扩容
陳10307 小时前
Linux:进程间切换与调度
linux·运维·服务器
lcreek7 小时前
Linux 虚拟文件系统的建立与使用全过程解析
linux·虚拟文件系统·vfs
寒秋花开曾相惜8 小时前
(学习笔记)第四章 处理器体系结构
linux·网络·数据结构·笔记·学习
疏星浅月8 小时前
虚拟内存三大核心作用详解
linux·c语言·arm开发·嵌入式硬件
邂逅星河浪漫9 小时前
【银行内网开发-管理端】Vue管理端+Auth后台开发+Nginx配置+Linux部署(详细解析)
linux·javascript·css·vue.js·nginx·html·前后端联调
JJay.9 小时前
Android BLE 稳定连接的关键,不是扫描,而是 GATT 操作队列
android·服务器·前端
SilentSamsara9 小时前
TCP 三次握手:连接建立失败的那些坑
运维·服务器·网络·网络协议·tcp/ip
码农小钻风10 小时前
利用Samba实现局域网跨平台共享文件
linux·samba·共享
LN花开富贵10 小时前
【ROS】鱼香ROS2学习笔记二
linux·笔记·python·学习·嵌入式