前端项目单独部署nginx服务器

本文记录了在AWS ec2服务器上通过nginx部署前端项目的详细步骤,包括配置自定义的nginx.conf文件,设置项目路径,处理端口访问及权限问题。

最近公司有新项目计划做前后端分离部署,让前端单独部署在一台AWS的ec2服务器,记录一下部署的过程,免得下次又得查阅资料~

AWS ec2服务器搭建nginx前端服务器

nginx前端项目默认存放目录:/usr/share/nginx/html,不想放这里就在自定义的conf文件修改项目路径(这里的文件放的是项目打包后的文件)

nginx.conf默认存放目录:/etc/nginx

命令:

1.编辑nginx.conf文件,将默认的conf文件修改为自定义的conf

--编辑nginx.conf  sudo vi /etc/nginx/nginx.conf  

--按i开始编辑

找到include /etc/nginx/conf.d/*.conf;  //修改为自己自定义的conf配置文件 include /etc/nginx/vhost/*.conf;

--按Esc退出编辑模式,然后按:wq!保存退出

2.自定义conf文件  sudo vi /etc/nginx/vhost/xxx.conf

server {

   listen      8080;

   server_name  localhost;

   root /home/ec2-user;

   location / {

     try_files $uri @fallback;

   }

### 使用 Nginx服务器部署多个前端项目的配置方法 在实际开发中,Nginx 是一种高效的反向代理和负载均衡工具,能够很好地支持多项目部署。以下是一个详细的配置方案,涵盖如何通过独立的配置文件实现多项目部署,并确保每个项目都能正常运行。 #### 配置隔离的多项目部署 为了降低多个前端项目之间的耦合度,可以通过创建独立的配置文件来实现配置隔离[^2]。例如,在 Nginx 的 `conf.d` 目录下为每个项目创建单独的 `.conf` 文件。 ```nginx # /etc/nginx/conf.d/project1.conf server { listen 80; server_name project1.example.com; root /path/to/project1; index index.html; location / { try_files $uri $uri/ /index.html; } } # /etc/nginx/conf.d/project2.conf server { listen 80; server_name project2.example.com; root /path/to/project2; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 这种配置方式使得每个项目拥有独立的配置文件,便于维护和扩展[^2]。 #### 配置 HTTPS 支持 为了确保通信的安全性,可以为每个项目配置 HTTPS。以下是一个示例配置,使用 Let's Encrypt 提供的免费 SSL 证书[^4]。 ```nginx # /etc/nginx/conf.d/project1-ssl.conf server { listen 443 ssl; server_name project1.example.com; ssl_certificate /etc/letsencrypt/live/project1.example.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/project1.example.com/privkey.pem; root /path/to/project1; index index.html; location / { try_files $uri $uri/ /index.html; } } # /etc/nginx/conf.d/project2-ssl.conf server { listen 443 ssl; server_name project2.example.com; ssl_certificate /etc/letsencrypt/live/project2.example.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/project2.example.com/privkey.pem; root /path/to/project2; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 通过这种方式,可以为每个项目单独配置 HTTPS,确保安全性和灵活性。 #### 测试与验证 完成配置后,需要测试 Nginx 配置文件的语法是否正确,并重新加载服务以应用更改。 ```bash # 测试 Nginx 配置文件语法 nginx -t # 如果配置正确,重新加载 Nginx 服务 systemctl reload nginx ``` #### 注意事项 - 确保每个项目的根目录路径正确无误。 - 如果使用不同的域名,需在 DNS 中正确配置 A 记录指向服务器的 IP 地址[^2]。 - 在同一端口部署多个项目时,可以通过子路径区分不同项目[^4]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值