阿里云服务器安装nginx并配置前端资源路径(前后端部署到一台服务器并成功访问)

​​​运行以下命令,安装Nginx相关依赖。

yum install -y gcc-c++

yum install -y pcre pcre-devel

yum install -y zlib zlib-devel

yum install -y openssl openssl-devel

运行wget命令下载Nginx 1.21.6 。

您可以通过Nginx开源社区直接获取对应版本的安装包URL,然后通过wget URL的方式将Nginx安装包下载至ECS实例。例如,Nginx 1.21.6的下载命令如下:

wget http://nginx.org/download/nginx-1.21.6.tar.gz

运行以下命令,解压Nginx 1.21.6安装包 ,然后进入Nginx所在的文件夹。

tar zxvf nginx-1.21.6.tar.gz

cd nginx-1.21.6

编译、安装

复制代码
./configure

make

make install

查找安装路径

复制代码
	whereis nginx

进入nginx目录

cd /usr/local/nginx/sbin

​

启动

./nginx

​

没有报错信息则代表nginx启动成功!

启动防火墙服务

systemctl start firewalld

放行80端口

firewall-cmd --zone=public --add-port=80/tcp --permanent

重加载防火墙使修改生效

firewall-cmd --reload

查看状态

ps -ef | grep nginx

重启

./nginx -s reload

停止

kill -9 端口号

上传静态资源

在目录/root中建立一个空文件夹用来存放静态资源

输入命令修改nginx配置

vim /usr/local/nginx/conf/nginx.conf

对我的路径来说我修改了以下三个地方

(1)location / 场景(前端页面、主资源)

你的 index.html 在 /root/app 目录下,Nginx 配置 root /root/app 时:

  • 访问 http://域名/ ,Nginx 会到 /root/app 找 index.html
  • 页面里引用的 assets/xxx.js ,会被解析为从 /root/app/assets/xxx.js 加载(因为 root 是基础路径,请求会拼接)
(2)location /assets 场景(静态资源单独映射)

为了让 /assets 路径直接对应到静态资源目录,用 alias /root/app/assets :

  • 访问 http://域名/assets/xxx.js ,Nginx 直接到 /root/app/assets/xxx.js 找文件
  • 比 root 更精准(root 会拼接路径,alias 是完全替换)

这样配置后:

  • 页面访问 → 从 /root/app 取 index.html
  • 资源访问 → 从 /root/app/assets 取 JS/CSS/ 图片

然后输入服务器ip+80 即可访问到页面

相关推荐
知已难寻10 小时前
03 · OpenStack的计算管理 Nova
运维·服务器·开发语言·云原生·云计算·openstack·开源软件
huainingning10 小时前
Windows syslog日志服务器搭建与模拟器对接
运维·服务器·智能路由器
say_fall11 小时前
【Linux系统编程】Ext 文件系统:磁盘与存储、文件与目录、现代计算机究竟如何寻找文件
linux·运维·服务器·数据库·c++
wacsii11 小时前
【Linux进程(一)】Linux 进程初探:操作系统如何管理进程?fork() 为什么返回两次?
linux·运维·服务器
共享家952711 小时前
408 操作系统第一章
服务器·数据库·windows
云飞云共享云桌面12 小时前
1台SolidWorks服务器如何承载10个设计并发?
运维·服务器·网络·3d·制造
墨理学AI14 小时前
虚拟机导致的服务器交换内容占用过大(服务器卡顿)问题 快速解决
运维·服务器
程序猿老A14 小时前
轻量应用服务器怎么搭建个人网站?
服务器
盛世宏博智慧档案15 小时前
一站式智慧档案解决方案,如何实现防火防盗漏水多维度安全监测实践
服务器·网络·数据库
枫叶轻语15 小时前
【Nginx 从入门到实战 09】前后端统一入口:部署页面与接口的完整配置
nginx·全栈