使用nginx部署前端项目的实现

 更新时间:2023年10月31日 16:36:06   作者:IT小辉同学  
前端项目的部署以前一直是把静态资源放到后端工程中,随后端部署一起部署,本文主要介绍了使用nginx部署前端项目的实现,具有一定的参考价值,感兴趣的可以了解一下

1.安装nginx

直接安装报错复现

yum -y install nginx

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aj50M2QD-1682698172214)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20230428231617125.png)]

解释:

Nginx在CentOS官方软件仓库中不可用,但它在EPEL (额外的CentOS软件包)软件仓库中可用,因此安装前需要先安装EPEL软件仓库

正确安装方式

1.安装epel-release

yum -y install epel-release

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eUs3znip-1682698172215)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20230428231846788.png)]

2.安装Nginx

yum -y install nginx

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yu8YP5fq-1682698172216)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20230428232043739.png)]

3.启动Nginx

Nginx安装完成后,启动Nginx服务

 systemctl start nginx  	#启动服务
 systemctl enable nginx 	#设置开机自启
 systemctl status nginx  	#查看启动状态

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H2cA7u7G-1682698172216)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20230428232335203.png)]

4.配置Nginx

由于Nginx默认配置文件并不适合我们的需求,我们需要对其进行修改。您可以按照下面的步骤操作:

备份默认配置文件:

cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.bak

使用文本编辑器打开新的配置文件 /etc/nginx/nginx.conf,并将其修改为以下内容:

user  nginx;
worker_processes  auto;
worker_rlimit_nofile 8192;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    access_log  /var/log/nginx/access.log;
    error_log   /var/log/nginx/error.log;

    sendfile        on;
    tcp_nopush      on;
    tcp_nodelay     on;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
}

上述配置文件将Nginx运行的用户来指定为nginx,同时为每个CPU核心配置一个worker进程,在“http”部分添加了一些基础配置,为Nginx添加了默认的www根目录和默认的网站,以及配置了几个常见的错误页面

5.重启Nginx

systemctl restart nginx

现在,您已经成功地安装和配置了Nginx。您可以通过打开服务器的IP地址或域名,以HTTP协议访问服务器进行测试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q3jxVDxs-1682698172217)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20230428233335178.png)]

2.配置自己网页

1.创建网站根目录

在服务器上创建一个新的目录来存放您的网站文件。例如,您可以在 /var/www/目录中创建一个名为 mysite 的新目录:

mkdir -p /var/www/mysite

2.添加网站文件

可使用ftp工具,也可以自己创建一个html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zCDAHcTn-1682698172218)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20230428234405048.png)]

3.配置Nginx

vim /etc/nginx/nginx.conf
server {
        listen 8888; #配置端口
        listen [::]:8888;

        server_name 192.168.6.100; #修改为您的域名

        root /var/www/mysite; #必须在这个层里面有自己的index.html首页
        index index.html;

        location / {
                try_files $uri $uri/ =404;
        }
}

在Nginx配置文件中的 server 块中,经常会看到两个 listen 语句,看起来会有点奇怪:

server {
    listen 80;
    listen [::]:80;
    ...
}

其中,listen 80; 表示将监听服务器的端口 80,而 listen [::]:80; 则是 IPv6 地址的监听器,同时监听端口 80。

这种方式可以确保您的网站可以通过 IPv4 和 IPv6 连接进行访问。例如,如果您使用的是第一个 listen 语句,那么只能使用 IPv4 地址连接到您的网站(例如,192.0.2.1),而如果您的服务器支持 IPv6,则使用 [::ffff:192.0.2.1] 进行 IPv4 转换。而如果您将其更改为仅使用 IPv6,那么仅支持 IPv6 的浏览器将无法访问您的网站。

因此,为了使您的网站能够通过 IPv4 和 IPv6 访问,最好同时使用 listen 80;listen [::]:80;。如果您认为您的网站仅需要通过一个协议进行访问,请仅使用相应的 listen 语句。

上述配置文件指定了一个新的虚拟主机,其中“server_name”指定为您要托管的网站的名称,例如“192.168.6.100”,“root”指定为您创建的网站根目录,例如“/var/www/mysite”,并且“index”指定为默认的网站文件名。

请注意,其余配置文件的内容将保持不变,您无需更改默认配置文件就可以进行启动和访问

4.测试Nginx配置

### [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xLCAypwn-1682698172218)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20230428235429980.png)]

5.重启Nginx

systemctl restart nginx

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T0aPO36B-1682698172219)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20230429000615507.png)]

3.可能遇到的问题

如果您在配置 Nginx 后仍无法访问您的网站,则可能存在以下一些常见问题:

1.防火墙端口未打开

如果您正在使用 Linux 防火墙(如 firewalld 或 iptables),则您可能需要打开端口以便让人们通过您的 Nginx 服务器访问您的网站。例如,如果您正在监听端口 80,则可以使用以下命令打开该端口:

使用 firewalld(CentOS 7+ 系统):

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

使用 iptables:

sudo iptables -I INPUT -p tcp --dport 80 -j ACCEPT
sudo iptables-save > /etc/sysconfig/iptables

2.SELinux规则限制

如果您的操作系统安装了 SELinux,则它可能会禁止 Nginx 访问某些文件或端口。您可以使用以下命令禁用 SELinux:

sudo setenforce 0

此外,您也可以编辑 SELinux 的规则以允许 Nginx 访问相应的文件或端口,以免在禁用 SELinux 的情况下降低系统安全性。

3.其他端口或路径冲突

如果您已经将 Web 服务器配置在其他端口上,则必须将 Nginx 监听不同的端口。同理,如果您安装了其他软件或 Web 应用程序,则可能会发生端口或路径冲突。在这种情况下,您需要更改 Nginx 的配置或更改其它的服务配置以避免冲突。

4.检查配置文件语法和错误

在修改 Nginx 配置文件时,很容易犯语法或其他错误。您可以使用以下命令检查 Nginx 配置文件的语法是否正确:

sudo nginx -t

如果您的配置文件存在语法错误,则输出类似于以下内容:

nginx: [emerg] unexpected "[" in /etc/nginx/conf.d/example.com.conf:8

请仔细检查输出错误信息,修复配置文件中的语法错误。

5.当前网络不可用

最后,确保您正在使用可访问互联网的网络,以免因网络问题而无法访问您的网站。如果您可以访问其他网站,但无法访问您自己的网站,则可能是由于 DNS 配置不正确导致的。在这种情况下,您可以暂时在您的本地计算机上修改 hosts 文件以尝试直接连接到您的服务器。

到此这篇关于使用nginx部署前端项目的实现的文章就介绍到这了,更多相关nginx部署前端项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Nginx解决Http慢攻击(Slow HTTP Attack)的方法

    Nginx解决Http慢攻击(Slow HTTP Attack)的方法

    缓慢的HTTP拒绝服务攻击是一种专门针对于Web的应用层拒绝服务攻击,本文给大家介绍了Nginx解决Http慢攻击(Slow HTTP Attack)的方法,需要的朋友可以参考下
    2024-02-02
  • Nginx中root和alias指令的使用与区别

    Nginx中root和alias指令的使用与区别

    root和alias是两个重要但经常令人混淆的指令,尤其用于指定资源在服务器文件系统中的位置,本文就来介绍一下两个指令的使用与区别,感兴趣的可以了解一下
    2024-08-08
  • Nginx结合keepalived实现集群

    Nginx结合keepalived实现集群

    本文主要介绍了Nginx结合keepalived实现集群,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-05-05
  • Nginx proxy_set_header配置方式

    Nginx proxy_set_header配置方式

    这篇文章主要介绍了Nginx proxy_set_header配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • 详解Nginx配置文件

    详解Nginx配置文件

    Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的,Nginx功能丰富,可作为HTTP服务器,也可作为反向代理服务器,邮件服务器。这篇文章主要介绍了Nginx配置文件,需要的朋友参考下
    2017-01-01
  • 基于Nginx+lua实现简单的XSS攻击拦截

    基于Nginx+lua实现简单的XSS攻击拦截

    WAF即web应用防火墙,Nginx是一个主流的代理服务,除了本身的Nginx日志,作为用户肯定也支持对请求信息进行操作, 很多都是通过在代理服务器上挂载规则特征,实现软件层面的软WAF进行WEB防护,本文主要给大家介绍了Nginx+Lua实现一个简单的XSS攻击拦截,需要的朋友可以参考下
    2024-01-01
  • nginx中配置使用proxy protocol协议的全过程

    nginx中配置使用proxy protocol协议的全过程

    proxy protocol是一个Internet协议,通过为tcp添加一个很小的头信息,来方便的传递客户端信息,在网络情况复杂又需要获取用户真实IP时非常有用,这篇文章主要给大家介绍了关于nginx中配置使用proxy protocol协议的相关资料,需要的朋友可以参考下
    2022-04-04
  • 详解nginx websocket配置

    详解nginx websocket配置

    这篇文章主要介绍了详解nginx websocket配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • keepalived对nginx进行高可用搭建及原理详解

    keepalived对nginx进行高可用搭建及原理详解

    这篇文章主要为大家介绍了keepalived对nginx进行高可用搭建及原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 解决SSE流被Nginx缓存的问题

    解决SSE流被Nginx缓存的问题

    如果你的服务使用了nginx网关,可能会出现nginx缓冲sse流的问题,导致的现象是,客户端调用sse接口时,流数据并不是一条条出现的,而是一口气出现的,本文将给大家介绍如何解决SSE流被Nginx缓存的问题,需要的朋友可以参考下
    2023-10-10

最新评论