当前位置：首页 > article >正文

nginx安装并部署前端项目【包括Linux与Windows系统】

article 2025/2/13 2:38:31

nginx安装并部署前端项目

一、 nginx下载与安装
二、前端项目部署
三、常用命令&注意事项
四、常见问题【持续更新】

一、 nginx下载与安装

① 下载地址：https://nginx.org/en/download.html

② 下载教程：根据不同操作系统（Linux或者Windows）下载稳定版本（Stable version）到本地

③ 启动nginx：Windows系统双击nginx.exe，若双击未弹出内容，则说明可能端口被占用【或者使用命令行cmd：输入start nginx】；Linux系统使用命令./nginx 启动

二、前端项目部署

一般主要配置http下sever字段即可部署成功，当然实际使用还需根据大家特殊情况进行特殊配置，示例配置及说明如下：

http {
    #根据需要自行添加配置
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;

    server {
        listen       8009;  #页面访问端口，若被占用可更换，修改完重启nginx即可
        server_name  localhost;
        
		#浏览器访问前端页面的地址
		location /test/chatPage {
			alias html/chatPage;  #前端页面代码路径
			index index.html index.htm;
			#如果请求的资源在静态文件目录中找不到，则重定向到index.html
			try_files $uri $uri/ /index.html;
		}
		
		#代理页面需要调用的接口，若不是本地接口，则可通过代理到其他环境接口获取数据进行调试		
		location /test/chat {
            proxy_pass http://xx.xxx.xxx.xx:8009/test/chat;
        }
		
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

三、常用命令&注意事项

tasklist | findstr nginx（就能查到开启的nginx）
taskkill /F /IM nginx.exe（能强制删除所有开的nginx），注意：开nginx的时候不要猛点
Linux系统：

① cd /usr/local/nginx/sbin/

② ./nginx 启动

③ ./nginx -s stop 停止

④ ./nginx -s quit 安全退出

⑤ ./nginx -s reload 重新加载配置文件

⑥ ps aux|grep nginx 查看nginx进程
windows系统：

① nginx.exe 启动

② nginx -s stop 停止

④ nginx -s quit 安全退出

⑤ nginx -s reload 重新加载配置文件

⑥ ps aux|grep nginx 查看nginx进程

四、常见问题【持续更新】

pc端用iframe嵌入智能体，页面无法加载，报Refused to display ‘’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

server {
    listen 80;
    server_name yourdomain.com;

    location /proxy/ {
        proxy_pass https://targetdomain.com/;
        proxy_set_header Host targetdomain.com;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 删除X-Frame-Options头部
        proxy_hide_header X-Frame-Options;

        # 可选：设置Content-Security-Policy来允许来自特定源的frame嵌入
        add_header Content-Security-Policy "frame-ancestors 'self' yourdomain.com";
    }
}