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就行了

相关推荐
IT运维爱好者2 分钟前
【Linux】LVM理论介绍、实战操作
linux·磁盘扩容·lvm
LEEE@FPGA5 分钟前
ZYNQ MPSOC linux hello world
linux·运维·服务器
郝学胜-神的一滴6 分钟前
Linux定时器编程:深入理解setitimer函数
linux·服务器·开发语言·c++·程序人生
冉佳驹10 分钟前
Linux ——— 系统中的用户身份切换、文件权限管理、特殊权限和粘滞位设置
linux·chmod·chown·粘滞位·su 命令·chgrp·umask
Tranquil_ovo15 分钟前
【Linux】Makefile 基础
linux
漏洞文库-Web安全16 分钟前
Linux逆向学习记录
linux·运维·学习·安全·web安全·网络安全·逆向
无奈笑天下23 分钟前
【银河麒麟高级服务器部署本地yum源】
linux·运维·服务器·经验分享
wanhengidc29 分钟前
云手机 数字生活中新的可能
运维·服务器·科技·安全·智能手机·生活
dodod201244 分钟前
Ubuntu 24.04 LTS 使用清华大学的 Ubuntu 镜像源以加速下载和更新操作
linux·运维·ubuntu
轻颂呀1 小时前
TCP协议
linux·网络·网络协议·tcp/ip