Linux环境使用nginx部署前端代码dist

  1. 下载安装nginx
//下载安装依赖(若已有则不需要)
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

//创建一个文件夹
cd /usr/local
mkdir nginx
cd nginx

//下载tar包
wget http://nginx.org/download/nginx-1.13.7.tar.gz
wget http://nginx.org/download/nginx-1.16.1.tar.gz

//解压tar包
tar -xvf nginx-1.13.7.tar.gz
tar -xvf nginx-1.16.1.tar.gz

//进入nginx目录
cd /usr/local/nginx

//执行命令(必须进入到configure存在的路径)
./configure

//执行make命令
make

//执行make install命令
make install

//此时nginx已经安装好,默认目录 /usr/local/nginx
  1. 放置前端文件
    将前端打包好的dist文件夹放在/usr/local/nginx目录下
    在这里插入图片描述

  2. 修改nginx配置文件
    打开文件nginx.conf (目录:/usr/local/nginx/conf/nginx.conf),nginx默认占用80端口,若80已被其他服务占用,则自行更换端口(更换的端口需先开放才能使用)
    在这里插入图片描述配置转发代理,将转发代理粘贴到如下位置:
    在这里插入图片描述在这里插入图片描述此时已经配置好了,然后启动nginx服务

  3. 启动nginx服务

//进入根目录
cd /
//进入sbin目录
cd /usr/local/nginx/sbin
//启动nginx服务
./nginx
//重启nginx服务
./nginx -s reload
//停止nginx服务
./nginx -s stop
//查看nginx进程
ps -ef|grep nginx
//关闭nginx进程
pkill -9 nginx
  1. 开机自启
    在rc.local增加一行代码即可开机自启,目录:/etc/rc.local
//增加以下代码保存即可
/usr/local/nginx/sbin/nginx
//若没有编辑权限使用以下命令赋予权限
//进入到根目录
cd /
//进入到目标文件rc.local的父级目录
cd /etc
//赋予文件rc.local操作权限
sudo chmod u=rxw,g=rxw,o=rxw rc.local
//此时再编辑保存rc.local文件即可
要在Nginx部署前端项目,你可以按照以下步骤操作: 1. 首先,确保你已经安装了Nginx。你可以从官方网站或使用包管理器进行安装。 2. 将前端项目的构建文件(通常是一个包含静态资源的文件夹,例如build或dist)拷贝到Nginx的默认站点目录下。在大多数Linux系统上,默认的站点目录是`/var/www/html`。 3. 打开Nginx的配置文件,通常位于`/etc/nginx/nginx.conf`。你可以使用任何文本编辑器打开它。 4. 在配置文件中找到`server`块,该块定义了Nginx的虚拟主机配置。 5. 在`server`块内部,添加一个新的`location`块,用于指定前端项目的路径和配置。 例如,如果你的前端项目在域名的根目录下,你可以将以下配置添加到`location`块中: ``` location / { root /var/www/html/build; # 替换为你实际的前端项目路径 index index.html; } ``` 如果你的前端项目在子路径下,你需要相应地更改`location`块中的路径和根目录。 6. 保存并关闭配置文件。 7. 重新加载Nginx配置,以使更改生效。你可以使用以下命令重新加载Nginx: ``` sudo nginx -s reload ``` 如果你使用的是不同的操作系统或包管理器,可能需要使用不同的命令重新加载Nginx。 8. 现在,你应该能够通过访问Nginx服务器的IP地址或域名来查看部署前端项目。 请注意,这只是一个基本的配置示例,实际配置可能会因前端项目的要求而有所不同。你可能需要进一步调整Nginx的配置以满足你的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值