11. Nginx进阶-HTTPS

简介

基本概述

SSL

SSL是安全套接层。
主要用于认证用户和服务器,确保数据发送到正确的客户机和服务器上。
SSL可以加密数据,防止数据中途被窃取。
SSL也可以维护数据的完整性,确保数据在传输过程中不被改变。

HTTPS

HTTPS就是基于SSL来实现的安全通信。

证书

证书用于保证密钥的合法性。
证书的主体可以是用户、服务、计算机等。
证书的格式准信X.509标准。
数字证书包含如下信息:

  1. 使用者的公钥值;
  2. 使用者标识信息(如名称和电子邮件地址);
  3. 有效期(证书的有效时间);
  4. 颁发者表示信息;
  5. 颁发者的数字签名;
  6. 注意:数字证书由权威公正的第三方机构签发。

小知识

  1. HTTPS证书的选择
    1. 专业版OV型证书,不显示企业名称
    2. 高级版EV型证书,显示企业名称
  2. HTTPS证书购买选择
    1. 通配符域名,如:*.o-learn.cn
    2. 保护域名,如:www.baidu.com
  3. HTTPS注意事项
    1. HTTPS不支持三级域名解析;
    2. HTTPS不支持续费,证书到期后需要重新申请并进行替换;
    3. HTTPS显示绿色,表示整个网站的URL都是HTTPS的;
    4. HTTPS显示黄色,表示网站中包含HTTP的不安全连接;
    5. HTTPS显示红色,表示证书过期或者证书是假的;

配置场景

应用

申请证书

私有证书

  1. 检查OpenSSL工具
    1. 检查是否安装
openssl --version
  1. 如未安装,以下命令安装
yum install openssl openssl-devel
  1. 检查nginx的ssl模块
nginx -V 2>&1 | grep ssl
#with-http_ssl_module
  1. 生成密钥
    1. 创建密钥目录
mkdir -p /www/ssl_key
cd /www/ssl_key
  1. 生成密钥
openssl genrsa -des3 -out wang_mingqu_com.key 1024

# Generating RSA private key, 1024 bit long modulus
# ...++++++
# ..................................................................++++++
# e is 65537 (0x10001)
# Enter pass phrase for https.key: 123456
# Verifying - Enter pass phrase for https.key: 123456
  1. 删除私钥的密码
openssl rsa -in wang_mingqu_com.key -out wang_mingqu_com.key

# Enter pass phrase for https.key: 123456
# writing RSA key
  1. 生成证书
    1. 创建签名请求证书
openssl req -new -key wang_mingqu_com.key -out wang_mingqu_com.csr

# You are about to be asked to enter information that will be incorporated
# into your certificate request.
# What you are about to enter is what is called a Distinguished Name or a DN.
# There are quite a few fields but you can leave some blank
# For some fields there will be a default value,
# If you enter '.', the field will be left blank.
# -----
# Country Name (2 letter code) [XX]:CN
# State or Province Name (full name) []:HeNan
# Locality Name (eg, city) [Default City]:ZhengZhou
# Organization Name (eg, company) [Default Company Ltd]:MingQuKeJi
# Organizational Unit Name (eg, section) []:YunWeiBu
# Common Name (eg, your name or your server's hostname) []:wang.mingqu.com
# Email Address []:15515190288@163.com

# Please enter the following 'extra' attributes
# to be sent with your certificate request
# A challenge password []:
# An optional company name []:
  1. 生成SSL证书
openssl x509 -req -days 365 -in wang_mingqu_com.csr -signkey wang_mingqu_com.key -out wang_mingqu_com.crt

# Signature ok
# subject=/C=CN/ST=HeNan/L=ZhengZhou/O=MingQuKeJi/OU=YunWeiBu/CN=wang.mingqu.com/emailAddress=15515190288@163.com
# Getting Private key
  1. 查看证书和密钥
ll /www/ssl_key/
total 28
-rw-r--r-- 1 root  root  981 Feb 26 16:36 wang_mingqu_com.crt
-rw-r--r-- 1 root  root   716 Feb 26 16:32 wang_mingqu_com.csr
-rw-r--r-- 1 root  root  887 Feb 26 16:30 wang_mingqu_com.key

公网证书

配置HTTPS

  1. 创建证书存放目录
mkdir -p /etc/nginx/ssl_key
cp /www/ssl_key/wang_mingqu_com.crt /etc/nginx/ssl_key/
cp /www/ssl_key/wang_mingqu_com.key /etc/nginx/ssl_key/
chown -R nginx:nginx /etc/nginx/ssl_key/
  1. 编辑nginx配置文件

路径:/etc/nginx/conf.d/wangmingqu.conf

server {
  listen 443 ssl;
  server_name wang.mingqu.com;
  charset utf-8;

  #配置https证书
  #ssl on; 新版本nginx中无需添加此行。

  #证书的存放路径
  ssl_certificate /etc/nginx/ssl_key/wang_mingqu_com.crt;
  ssl_certificate_key /etc/nginx/ssl_key/wang_mingqu_com.key;

  #证书的缓存有效期
  ssl_session_timeout 5m;
  #证书的加密算法
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  #安全链接可选的加密协议
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  #使用服务器端的首选算法
  ssl_prefer_server_ciphers on;

  location / {
    root /www/wangmingqu/html;
    index index.html index.htm;
  }
}

#跳转HTTPS
server {
  listen 80;
  server_name wang.mingqu.com;
  charset utf-8;

  #server_name:表示访问的域名,也可以使用变量$host;
  #server_name,跟定义的配置文件的server_name有关;
  #host,则是用户输入的内容;
  #request_uri:表示访问时域名后所有内容。
  rewrite .* https://$server_name$request_uri redirect;
  ##写法二:
  #rewrite .* https://$host$request_uri redirect;
  ##写法三:
  #rewrite (.*)  https://$server_name$1 redirect;
}
  1. 检查配置
nginx -t
systemctl reload nginx
  1. 访问测试

image.png
image.png

负载均衡HTTPS跳转

主机规划

主机名称主机IP服务
k8s-master-1192.168.108.129Nginx Proxy
k8s-master-2192.168.108.130Nginx Web1
k8s-master-3192.168.108.131Nginx Web2

配置站点

注意

移除其他测试配置文件

cd /etc/nginx/conf.d/
rename .conf .bak *.conf

web01配置

  1. 测试数据
mkdir -p /www/html/
echo "主机:192.168.108.130" > /www/html/index.html
chown -R nginx:nginx /www/html
  1. 配置nginx
    1. 主配置文件

配置文件路径:/etc/nginx/nginx.conf

user  nginx;
worker_processes  auto;

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


events {
    worker_connections  1024;
}


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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}
  1. 子配置文件

配置文件路径:/etc/nginx/conf.d/web01.conf

server {
  listen 443;
  server_name wang.mingqu.com;
  chartset utf-8;

  location / {
    root /www/html/;
    index index.html index.htm;
  }
}
  1. 验证nginx服务
    1. 重启服务
nginx -t
systemctl restart nginx
  1. 验证服务
curl -iv 127.0.0.1:443

web02配置

  1. 测试数据
mkdir -p /www/html/
echo "主机:192.168.108.131" > /www/html/index.html
chown -R nginx:nginx /www/html
  1. 配置nginx
    1. 主配置文件

配置文件路径:/etc/nginx/nginx.conf

user  nginx;
worker_processes  auto;

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


events {
    worker_connections  1024;
}


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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}
  1. 子配置文件

配置文件路径:/etc/nginx/conf.d/web02.conf

server {
  listen 443;
  server_name wang.mingqu.com;
  charset utf-8;

  location / {
    root /www/html/;
    index index.html index.htm;
  }
}
  1. 验证nginx服务
    1. 重启服务
nginx -t
systemctl restart nginx
  1. 验证服务
curl -iv 127.0.0.1:443

配置负载

注意

移除其他测试配置文件

cd /etc/nginx/conf.d/
rename .conf .bak *.conf

测试数据

mkdir -p /www/html/localhost
echo "主机:192.168.108.129" > /www/html/localhost/index.html
chown -R nginx:nginx /www/html

主配置文件

配置文件路径:/etc/nginx/nginx.conf

user  nginx;
worker_processes  auto;

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


events {
    worker_connections  1024;
}


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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    rewrite_log     on;
    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

子配置文件

配置文件路径:/etc/nginx/conf.d/proxy.conf

upstream web {
  server 192.168.108.130:443;
  server 192.168.108.131:443;
}

server {
  listen 80;
  server_name wang.mingqu.com;
  charset utf-8;

  location / {
    proxy_pass http://web;
  }

  location /localhost {
    root /www/html/;
    index index.html index.htm;
  }
}

验证服务

  1. 重启nginx
nginx -t
systemctl restart nginx
  1. 验证nginx
    1. 负载均衡本地服务

image.png

  1. 负载均衡后端服务

image.png
image.png

HTTPS跳转配置

证书文件

mkdir -p /etc/nginx/ssl_key
cp /www/ssl_key/wang_mingqu_com.crt /etc/nginx/ssl_key/
cp /www/ssl_key/wang_mingqu_com.key /etc/nginx/ssl_key/
chown -R nginx:nginx /etc/nginx/ssl_key/

配置文件调整

upstream web {
  server 192.168.108.130:443;
  server 192.168.108.131:443;
}

server {
  listen 443 ssl;
  server_name wang.mingqu.com;
  charset utf-8;

  #配置https证书
  #ssl on; 新版本nginx中无需添加此行。

  #证书的存放路径
  ssl_certificate /etc/nginx/ssl_key/wang_mingqu_com.crt;
  ssl_certificate_key /etc/nginx/ssl_key/wang_mingqu_com.key;

  #证书的缓存有效期
  ssl_session_timeout 5m;
  #证书的加密算法
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  #安全链接可选的加密协议
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  #使用服务器端的首选算法
  ssl_prefer_server_ciphers on;

  location / {
    proxy_pass http://web;
    include proxy_params;
  }
}

#跳转HTTPS
server {
  listen 80;
  server_name wang.mingqu.com;
  charset utf-8;

  #server_name:表示访问的域名,也可以使用变量$host;
  #server_name,跟定义的配置文件的server_name有关;
  #host,则是用户输入的内容;
  #request_uri:表示访问时域名后所有内容。
  rewrite .* https://$server_name$request_uri redirect;
  ##写法二:
  #rewrite .* https://$host$request_uri redirect;
  ##写法三:
  #rewrite (.*)  https://$server_name$1 redirect;
}

测试HTTPS跳转

image.png
image.png
image.png

[root@yfw ~]# cd /www/wwwroot/szrengjing.com [root@yfw szrengjing.com]# ls -la total 91636 drwxr-xr-x 28 www www 4096 Nov 10 10:28 . drwxr-xr-x 12 www www 4096 Nov 8 14:50 .. -rwxr-xr-x 1 www www 138 Oct 9 2023 404.html -rwxr-xr-x 1 www www 5877 Oct 9 2023 activity.php drwxr-xr-x 12 www www 4096 Nov 6 15:39 admin -rwxr-xr-x 1 www www 6898 Oct 9 2023 affiche.php -rwxr-xr-x 1 www www 3377 Oct 9 2023 affiliate.php -rwxr-xr-x 1 www www 2150 Oct 9 2023 ajax_68ecshop.php -rwxr-xr-x 1 www www 2964 Oct 9 2023 ajax_www_68ecshop_com.php -rwxr-xr-x 1 www www 263 Oct 9 2023 alipay.html -rwxr-xr-x 1 www www 1505 Oct 11 2023 animated_favicon.gif drwxr-xr-x 3 www www 4096 Sep 22 11:20 api -rwxr-xr-x 1 www www 18060 Oct 9 2023 api.php drwxr-xr-x 7 www www 4096 Oct 9 2023 app -rwxr-xr-x 1 www www 2367 Oct 9 2023 apply_index.php -rwxr-xr-x 1 www www 16339 Oct 9 2023 apply.php -rwxr-xr-x 1 www www 5333 Oct 9 2023 article_cat.php -rwxr-xr-x 1 www www 6934 Oct 9 2023 article_list.php -rwxr-xr-x 1 www www 9249 Oct 9 2023 article.php -rwxr-xr-x 1 www www 18629 Oct 9 2023 auction.php -rwxr-xr-x 1 www www 17932 Oct 9 2023 brand.php -rwxr-xr-x 1 www www 1104 Oct 9 2023 captcha.php -rwxr-xr-x 1 www www 2174 Oct 9 2023 catalog.php -rwxr-xr-x 1 www www 39916 Oct 9 2023 category.php drwxr-xr-x 2 www www 4096 Oct 9 2023 cert -rwxr-xr-x 1 www www 1401 Oct 9 2023 certi.php -rw-r--r-- 1 root root 45916100 Nov 10 15:03 chat.log -rw-r--r-- 1 root root 0 Nov 9 15:24 chat_log.txt -rwxr-xr-x 1 www www 15792 Nov 7 02:57 chat.php -rwxr-xr-x 1 www www 2498 Nov 9 14:08 chat_server.php -rwxr-xr-x 1 www www 989 Nov 7 09:55 check_kefu_config.sh -rwxr-xr-x 1 www www 2034 Oct 9 2023 chinabank_receive.php -rwxr-xr-x 1 www www 10996 Oct 9 2023 comment_add.php -rwxr-xr-x 1 www www 13581 Oct 9 2023 comment.php -rwxr-xr-x 1 www www 6351 Oct 9 2023 compare.php -rwxr-xr-x 1 www www 254 Jul 12 02:15 composer.json -rw-r--r-- 1 www www 37709 May 22 18:11 composer.lock -rwxr-xr-x 1 www www 1376 Oct 9 2023 cycle_image.php -rw-r--r-- 1 root root 3872406 Nov 10 15:03 daemon.log drwxrwxrwx 24 www www 4096 Jul 20 19:33 data -rwxr-xr-x 1 www www 3010 Oct 9 2023 delete_cart_goods.php -rwxr-xr-x 1 www www 11106 Oct 9 2023 denglu.php -rwxr-xr-x 1 www www 158 Oct 9 2023 dl_receiver.php -rw-r--r-- 1 root root 443 Nov 9 20:54 Dockerfile -rwxr-xr-x 1 www www 2622 Oct 9 2023 erweima_png.php -rwxr-xr-x 1 www www 1540 Oct 9 2023 erweima_supplier.php -rwxr-xr-x 1 www www 32199 Oct 9 2023 exchange.php -rwxr-xr-x 1 www www 1099 Oct 17 2023 favicon.ico -rwxr-xr-x 1 www www 10874 Oct 9 2023 feed.php -rwxr-xr-x 1 www www 19019 Oct 9 2023 findPwd.php -rwxr-xr-x 1 www www 934 Nov 5 14:28 fix_login.sh -rwxr-xr-x 1 www www 4370 Oct 9 2023 flash.js -rwxr-xr-x 1 www www 173212 Apr 5 2025 flow.php -rwxr-xr-x 1 www www 2357 Oct 9 2023 gallery.php -rwxr-xr-x 1 www www 4929 Oct 9 2023 goods_comment.php -rwxr-xr-x 1 www www 53111 Nov 9 2024 goods.php -rwxr-xr-x 1 www www 6504 Oct 9 2023 goods_script.php -rwxr-xr-x 1 www www 2954 Oct 9 2023 goods_shaidan.php -rwxr-xr-x 1 www www 13636 Oct 9 2023 group_buy.php -rwxr-xr-x 1 www www 9227 Oct 9 2023 help.php -rwxr-xr-x 1 www www 9249 Apr 24 2024 .htaccess -rwxr-xr-x 1 www www 2186 Nov 7 10:15 http-bind.php drwxr-xr-x 25 www www 4096 Oct 1 16:29 images drwxr-xr-x 10 www www 4096 Jun 3 18:25 includes -rwxr-xr-x 1 www www 25211 Jul 20 11:32 index.php -rwxr-xr-x 1 www www 3605 Oct 9 2023 Iogo.png -rwxr-xr-x 1 www www 3996 Jun 29 2010 jb51.net.txt drwxr-xr-x 7 www www 4096 Oct 9 2023 js drwxr-xr-x 3 root root 4096 Nov 10 11:11 jsxc -rw-r--r-- 1 root root 646 Nov 7 04:53 kefu_scan_report.txt -rwxr-xr-x 1 www www 10111 Oct 9 2023 kuaidi.php drwxr-xr-x 3 www www 4096 Oct 9 2023 languages -rwxr-xr-x 1 www www 1628 Sep 1 2013 licence.txt -rwxr-xr-x 1 www www 950 Oct 9 2023 login_act_ajax.php -rwxr-xr-x 1 www www 86251 Nov 11 2023 login_dl.jpg -rw-r--r-- 1 www www 879 Jun 5 00:41 login_handler.php -rwxr-xr-x 1 www www 1087 Nov 5 14:49 login.sh drwxr-xr-x 2 www www 4096 Nov 7 05:16 logs -rwxr-xr-x 1 www www 10629 Oct 9 2023 message.php drwxr-xr-x 20 www www 4096 Jan 1 2024 mobile -rwxr-xr-x 1 www www 16 Oct 9 2023 MP_verify_saEliKc9osXXdN26.txt -rwxr-xr-x 1 www www 4185 Oct 9 2023 myship.php -rw-r--r-- 1 www www 31395840 May 21 09:18 node-v22.16.0-x64.msi -rwxr-xr-x 1 www www 701 Oct 9 2023 other.php -rw-r--r-- 1 root root 97 Jun 4 20:56 package.json -rw-r--r-- 1 www www 23844 Jun 4 20:57 package-lock.json -rwxr-xr-x 1 www www 3998 Oct 9 2023 package.php -rwxr-xr-x 1 www www 4512 Aug 16 21:06 php_upgrade_audit.php -rwxr-xr-x 1 www www 11916 Oct 9 2023 pick_out.php drwxr-xr-x 3 www www 4096 Jun 14 2024 plugins -rwxr-xr-x 1 www www 1168 Oct 9 2023 pm.php -rwxr-xr-x 1 www www 46294 Oct 9 2023 pre_sale.php -rwxr-xr-x 1 www www 1339 Oct 9 2023 pricecut.php -rwxr-xr-x 1 www www 38435 Oct 9 2023 pro_goods.php -rwxr-xr-x 1 www www 36542 Oct 9 2023 pro_search.php -rwxr-xr-x 1 www www 403 Nov 10 03:02 qrcode.png -rwxr-xr-x 1 www www 5940 Oct 9 2023 question.php -rwxr-xr-x 1 www www 6341 Oct 9 2023 quotation.php drwxr-xr-x 2 root root 4096 Jul 12 02:15 ratchet-project -rwxr-xr-x 1 www www 6335 Oct 9 2023 README.md -rwxr-xr-x 1 www www 3298 Oct 9 2023 receive.php -rwxr-xr-x 1 www www 1754 Oct 9 2023 record.php -rwxr-xr-x 1 www www 1354 Oct 9 2023 region.php -rw-r--r-- 1 www www 21436 Nov 5 09:38 register.php -rwxr-xr-x 1 www www 0 Oct 9 2023 request.log -rwxr-xr-x 1 www www 3209 Oct 9 2023 respond.php -rwxr-xr-x 1 www www 2598 Oct 9 2023 respondwx.php -r-------- 1 www www 584 Oct 9 2023 robots.txt -rwxr-xr-x 1 www www 989 Jul 8 06:13 save_chat_record.php -rwxr-xr-x 1 www www 3798 Oct 9 2023 scan_list.php -rwxr-xr-x 1 www www 473 Oct 9 2023 scan.php -rw-r--r-- 1 www www 1791 Aug 14 19:32 scirpt.php -rwxr-xr-x 1 www www 34034 May 6 2025 search.php -rwxr-xr-x 1 www www 47739 Dec 30 2024 security.php -rwxr-xr-x 1 www www 642 Jul 20 06:28 send_msg.php -rw-r--r-- 1 root root 496 Nov 9 20:59 server.py -rwxr-xr-x 1 www www 4668 Oct 9 2023 sitemaps.php -rwxr-xr-x 1 www www 108865 Dec 15 2024 sitemaps.xml drwxr-xr-x 3 www www 4096 Oct 9 2023 sms -rwxr-xr-x 1 www www 17076 Oct 9 2023 snatch.php -rwxr-xr-x 1 www www 4437 Nov 9 13:08 socket_server.php drwxr-xr-x 2 www www 4096 Oct 9 2023 sound -rwxr-xr-x 1 root root 289 Nov 9 13:42 start_chat.sh -rw-r--r-- 1 root root 228 Nov 9 20:55 start.sh drwxr-xr-x 2 root root 4096 Nov 7 04:31 static -rwxr-xr-x 1 www www 9857 Oct 9 2023 stores.php -rwxr-xr-x 1 www www 3645 Jul 20 11:18 Strophe.php -rwxr-xr-x 1 www www 2811 Nov 5 19:34 submit_rating.php drwxr-xr-x 8 www www 4096 May 22 18:58 supplier -rwxr-xr-x 1 www www 8010 Oct 9 2023 supplier_article.php -rwxr-xr-x 1 www www 18413 Oct 9 2023 supplier_category.php -rwxr-xr-x 1 www www 13173 Oct 9 2023 supplier_index.php -rwxr-xr-x 1 www www 1629 Oct 9 2023 supplier_other.php -rwxr-xr-x 1 www www 1933 Oct 9 2023 supplier.php -rwxr-xr-x 1 www www 408 Nov 9 22:08 supplier.png -rwxr-xr-x 1 www www 1825 Oct 9 2023 supplier_reg.php -rwxr-xr-x 1 www www 11939 Oct 9 2023 supplier_search.php -rw-r--r-- 1 root root 1070 Nov 9 21:02 support.html -rw-r--r-- 1 root root 988 Nov 9 21:09 support-workbench.html -rw-r--r-- 1 www www 5864 Nov 5 01:54 sync_openfire.php drwxr-xr-x 2 root root 94208 Nov 10 12:56 szrengjing_com -rwxr-xr-x 1 www www 1726 Oct 9 2023 tag_cloud.php -rwxr-xr-x 1 www www 12604 Oct 9 2023 takegoods.php drwxr-xr-x 7 www www 4096 Sep 5 00:05 temp drwxr-xr-x 10 www www 4096 Oct 9 2023 themes -rwxr-xr-x 1 www www 5570 Oct 9 2023 topic.php drwxr-xr-x 3 www www 4096 Oct 9 2023 ueditor -rw-r--r-- 1 root root 2292786 Aug 16 21:07 upgrade_issues.txt -rw-r--r-- 1 root root 72001 Nov 8 15:12 upgrade_scan_report.txt -rwxr-xr-x 1 www www 2972 Oct 9 2023 url301.php -rw-r--r-- 1 root root 47 Oct 9 2023 .user.ini -rwxr-xr-x 1 www www 205685 Aug 17 11:56 user.php -rwxr-xr-x 1 www www 4752 Jan 14 2025 validate.php drwxr-xr-x 9 www www 4096 May 22 18:11 vendor -rwxr-xr-x 1 www www 57184 Oct 9 2023 virtual_group_goods.php -rwxr-xr-x 1 www www 17809 Oct 9 2023 virtual_group.php -rwxr-xr-x 1 www www 3397 Oct 9 2023 vote.php drwxr-xr-x 4 www www 4096 Oct 9 2023 wap drwxr-xr-x 3 root root 4096 Jun 5 12:36 .well-known -rw-r--r-- 1 www www 3823 Apr 11 2025 wget-log -rw-r--r-- 1 root root 5687721 Nov 10 15:01 wget-log.1 -rwxr-xr-x 1 www www 20686 Oct 9 2023 wholesale.php drwxr-xr-x 3 www www 4096 Oct 9 2023 widget -rwxr-xr-x 1 www www 428 Apr 6 2025 wxpay_notify.php -rw-r--r-- 1 root root 255 Nov 7 10:10 'XMPP Login Test' -rwxr-xr-x 1 www www 26242 Nov 9 22:42 xmpp-php-master.zip -rwxr-xr-x 1 www www 2726 Apr 6 2025 z1988com.php -rwxr-xr-x 1 www www 540 Oct 9 2023 安装说明.txt -rwxr-xr-x 1 www www 2392064 Oct 9 2023 模板修改教程.doc -rwxr-xr-x 1 www www 114 Feb 27 2013 脚本之家.url [root@yfw szrengjing.com]#
11-11
你已经成功将 JSXC 项目构建出完整的 `dist/` 目录,并且当前位于你的网站根目录: ``` /www/wwwroot/szrengjing.com/ ``` 现在,你需要 **把构建好的 JSXC 客户端集成到你的网站中**,并让 `chat.php` 或其他页面能够正常加载和使用它。 --- ## ✅ 当前状态分析 | 项目 | 状态 | |------|------| | `jsxc.bundle.min.js` 已生成 | ✅ 是(在 `/jsxc/dist/`) | | JSXC 源码路径 | `/www/wwwroot/szrengjing.com/jsxc/jsxc-master/` | | 构建输出路径 | `/www/wwwroot/szrengjing.com/jsxc/jsxc-master/dist/` | | 网站根目录 | `/www/wwwroot/szrengjing.com/` | | 存在 `chat.php` | ✅ 是(可能是自定义聊天入口) | | 静态资源可访问性 | ❌ 尚未部署到 Web 可访问路径 | --- ## 🚀 第一步:将构建结果拷贝到 Web 可访问的静态资源目录 建议结构: ``` /jsxc/css/ → 存放 CSS /jsxc/js/ → 存放 jsxc.bundle.min.js /jsxc/images/ → 表情包等 /jsxc/sound/ → 提示音 /jsxc/example/ → 示例页(用于测试) ``` ### 执行命令: ```bash # 创建目标目录 sudo -u www mkdir -p /www/wwwroot/szrengjing.com/jsxc/{css,js,images,sound,example} # 拷贝文件 sudo -u www cp /www/wwwroot/szrengjing.com/jsxc/jsxc-master/dist/jsxc.bundle.min.js /www/wwwroot/szrengjing.com/jsxc/js/ sudo -u www cp /www/wwwroot/szrengjing.com/jsxc/jsxc-master/dist/styles/jsxc.bundle.css /www/wwwroot/szrengjing.com/jsxc/css/ sudo -u www cp -r /www/wwwroot/szrengjing.com/jsxc/jsxc-master/dist/images/* /www/wwwroot/szrengjing.com/jsxc/images/ sudo -u www cp -r /www/wwwroot/szrengjing.com/jsxc/jsxc-master/dist/sound/* /www/wwwroot/szrengjing.com/jsxc/sound/ sudo -u www cp -r /www/wwwroot/szrengjing.com/jsxc/jsxc-master/dist/example/* /www/wwwroot/szrengjing.com/jsxc/example/ ``` ✅ 完成后你可以通过以下 URL 访问: - JSXC 主程序:`https://szrengjing.com/jsxc/js/jsxc.bundle.min.js` - 样式表:`https://szrengjing.com/jsxc/css/jsxc.bundle.css` - 示例页:`https://szrengjing.com/jsxc/example/index.html` > 💡 推荐用 Nginx 或 Apache 开启 HTTPS,否则现代浏览器会阻止 WebSocket/BOSH 连接。 --- ## ✅ 第二步:修改 `chat.php` 来加载 JSXC 聊天界面 编辑 `/www/wwwroot/szrengjing.com/chat.php`: ```php <?php // chat.php - JSXC 聊天嵌入页面 // 假设你是登录用户,从 session 获取用户名 session_start(); $username = $_SESSION['user_name'] ?? 'guest'; // 替换为实际逻辑 $domain = 'your-xmpp-server.com'; // 改成你的 Openfire/Ejabberd 域名 $bosh_url = 'https://your-xmpp-server.com:7443/http-bind/'; // BOSH 地址 ?> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>在线客服聊天</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- 引入 jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入 JSXC 样式 --> <link rel="stylesheet" href="/jsxc/css/jsxc.bundle.css" /> <!-- 设置容器样式 --> <style> body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; } #jsxc_root { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } </style> </head> <body> <!-- JSXC 容器 --> <div id="jsxc_root"></div> <!-- 加载 JSXC 主程序 --> <script src="/jsxc/js/jsxc.bundle.min.js"></script> <script> $(function() { // 初始化 JSXC JSXC.init({ loginForm: { enabled: false, // 我们自动登录,不显示表单 }, xmpp: { url: '<?php echo $bosh_url; ?>', domain: '<?php echo $domain; ?>', resource: 'web', overwrite: true, }, root: '/jsxc', // 指向静态资源根目录 displayRosterMinimized: function() { return false; // 启动时展开联系人列表 }, otr: { enable: true, debug: false, }, onPresenceUpdate: function(jid, presence) { console.log('Presence:', jid, presence); } }); // 自动登录(格式:username@domain) const jid = '<?php echo htmlspecialchars($username . "@" . $domain); ?>'; const password = '<?php echo $_SESSION['xmpp_password'] ?? "temp-pass"; ?>'; // 实际应安全获取 JSXC.start(jid, password); }); </script> </body> </html> ``` --- ## 🔐 第三步:确保 XMPP 服务可用(BOSH/WebSocket) 你需要确认: 1. **Openfire 或 Ejabberd 正在运行** 2. **已启用 BOSH 或 WebSocket** 3. **HTTPS 已配置(推荐 Let's Encrypt)** 4. **CORS 设置允许你的域名访问** ### 示例 Nginx 反向代理配置(BOSH) ```nginx server { listen 443 ssl; server_name szrengjing.com; ssl_certificate /www/server/panel/vhost/cert/szrengjing.com/fullchain.pem; ssl_certificate_key /www/server/panel/vhost/cert/szrengjing.com/privkey.pem; location /http-bind { proxy_pass http://127.0.0.1:7443/http-bind; proxy_set_header Host $host; 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; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } location / { root /www/wwwroot/szrengjing.com; index index.php index.html; } location ~ \.php$ { include /etc/nginx/fastcgi_params; fastcgi_pass unix:/var/run/php/php74-fpm.sock; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; } } ``` 重启 Nginx: ```bash systemctl restart nginx ``` --- ## 🧪 第四步:测试功能 1. 登录你的网站,进入 `chat.php` 2. 打开浏览器开发者工具(F12) 3. 查看是否报错: - ❌ 文件 404?→ 检查路径 - ❌ CORS 错误?→ 检查 Nginx/Caddy 配置 - ❌ 连接被拒绝?→ 检查 Openfire 是否监听 7443 4. 成功连接后你会看到 JSXC 聊天窗口弹出 --- ## 💡 进阶建议 ### 1. 用户名映射规则 确保你的 PHP 系统中的用户能对应到 XMPP 账号。例如: ```php $xmpp_jid = $user_id . '@your-xmpp-server.com'; ``` 可以提前在 Openfire 中批量导入或使用 REST API 创建账号。 ### 2. 使用 Strophe.js 手动连接(轻量级替代) 如果你不想用完整 JSXC UI,可以用 `Strophe.js` 写一个极简聊天框: ```html <script src="/js/strophe.min.js"></script> <script> const conn = new Strophe.Connection("https://your-xmpp-server.com:7443/http-bind/"); conn.connect("user@your-xmpp-server.com", "password", (status) => { if (status === Strophe.Status.CONNECTED) { console.log("Connected!"); conn.addHandler(onMessage, null, "message"); } }); function onMessage(msg) { const text = $(msg).find('body').text(); alert("收到消息:" + text); return true; } </script> ``` --- ## ✅ 总结:你现在可以做什么? | 功能 | 是否完成 | 如何验证 | |------|----------|---------| | 构建 JSXC 成功 | ✅ | `ls dist/jsxc.bundle.min.js` | | 部署到 Web 路径 | ✅ | 访问 `/jsxc/js/jsxc.bundle.min.js` | | 修改 `chat.php` 加载 JSXC | ✅ | 打开 `chat.php` 看是否有聊天窗口 | | 连接到 XMPP 服务器 | ⚠️ 待测试 | 浏览器控制台查看连接状态 | | 实现自动登录 | ✅ | PHP 注入 JID 和密码 | ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值