APEX实战第4篇：如何把APEX程序变成“移动端APP”？-CSDN博客

因为使用手机登录APEX程序时，每次都要先到手机浏览器的入口感觉不方便且不专业，所以能不能像APP那样直接点击进入呢？

最简单的方式，就是使用PWA来实现类似APP程序一样的移动端登录。

PWA本身配置极其简单，开启就好，但是PWA的前提是，你开发的网站必须要使用https安全访问才可以。

1.搞定https所需证书
2.解决apex测试问题
3.开启PWA功能
4.体验“移动端APP”效果

1.搞定https所需证书

使用 ORDS + Nginx 前端代理是目前 Oracle APEX 部署中最推荐的模式之一：既安全、灵活又高性能。

下面演示在 OEL 系统下使用 Certbot + Nginx 为 ORDS 配置免费 HTTPS 的完整方案。
本文假设你申请的域名为yourdomain.com，我所有贴出的配置也都全部替换这个域名方便大家理解。

sudo dnf install epel-release -y
sudo dnf install nginx -y

--error,这个在OEL源中没有下面的certbot、python3-certbot-nginx这两个包
--sudo dnf install certbot python3-certbot-nginx -y

--改为使用pip安装 Certbot + Nginx 插件
pip3 install certbot certbot-nginx

--安装之后，需要确认certbot命令可用（环境变量有效，root用户也可以执行）
$ which certbot
/u01/kbot/anaconda3/bin/certbot
$ sudo ln -s /u01/kbot/anaconda3/bin/certbot /usr/bin/certbot
$ ls -l /usr/bin/certbot 
lrwxrwxrwx 1 root root 31 Jun 20 01:58 /usr/bin/certbot -> /u01/kbot/anaconda3/bin/certbot

如果直接使用普通用户执行certbot会报错：

[Errno 13] Permission denied: '/var/log/letsencrypt/.certbot.lock'
Either run as root, or set --config-dir, --work-dir, and --logs-dir to writeable paths.

为了简单，这里直接sudo使用root用户权限来申请证书：

sudo certbot certonly --standalone -d yourdomain.com

生成的证书路径默认在这个路径下：

/etc/letsencrypt/live/yourdomain.com/

你只需把这些证书手动配置进你的 Nginx：

ssl_certificate     /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;

创建或编辑 Nginx 配置文件(有些配置是后面遇到实际问题后加上去的)：

sudo vi /etc/nginx/conf.d/apex.conf

# 强制 HTTP 跳转到 HTTPS
server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    return 301 https://yourdomain.com$request_uri;
}

# HTTPS 主站配置
server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate     /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;

    location / {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-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_set_header X-Forwarded-Port 443;
    }
}

# Unique 
server {
    listen 443 ssl;
    server_name www.yourdomain.com;

    ssl_certificate     /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;

    return 301 https://yourdomain.com$request_uri;
}

检查配置是否正确(会自动检查配置的Nginx文件)，之后重启Nginx：

sudo nginx -t   
sudo systemctl restart nginx

配置证书自动续期：

虽然这里我是通过 --standalone 获得证书，但仍然可以自动续期并 reload Nginx。

编辑定时任务：
使用 sudo -s 切换到root用户。

crontab -e

0 3 * * * certbot renew --post-hook "systemctl reload nginx"

注：这里并不需要再执行 certbot --nginx，因为我们已经获得了证书，而且现在的需求是配置好 Nginx 使用已有证书，不必重复申请。
如果你将来更改了域名或 Nginx 配置中想让 Certbot 自动更新文件，那么再用 --nginx 模式也可以，但当前完全没必要。

2.解决apex测试问题

https搞定之后，发现使用https登录apex的workspace还是有问题，报错HTTP 403以及ORDS-13002：

这里需要对ORDS的一些配置文件做修改：

sudo vi $ORDS_CONFIG/global/settings.xml

添加以下内容：（在合适位置，看文件就懂了）

<entry key="security.allow_origin">https://yourdomain.com</entry>

发现还是不行，请教LLM助手给建议，回复说要两个设置：

  <!-- 允许 CORS 来源 -->
  <entry key="security.allow_origin">https://yourdomain.com</entry>

  <!-- 允许跨域 Cookie Session 来源 -->
  <entry key="security.externalSessionTrustedOrigins">https://yourdomain.com</entry>

设置好之后，依次重启ORDS和NGINX：

nohup ords serve >> ~/ords.log &
systemctl restart nginx

测试OK，使用之前学习apex期间做的一个DEMO程序，可以正常访问：

https://yourdomain.com/ords/r/ws_whale/whalestudy/home

但是，从APEX run app时：

https://yourdomain.com:80/ords/r/ws_whale/aireport?session=4407332749203

会自动加一个80端口，反而导致问题。这个问题是因为Nginx配置文件问题，加一行(上面配置文件已经是修改过的版本，所以你实际去测试的话，就不会有任何问题)：

proxy_set_header X-Forwarded-Port 443;

3.开启PWA功能

在APEX中给已有的APEX应用程序，开启PWA功能，这个操作就非常简单，主要下面配置：

Edit Application Definition

Friendly URLs
Enable Progressive Web App

这里引用官方apex培训的课程给出的直观截图，一目了然，找不到位置的同学可直接参考这个图示：

4.体验“移动端APP”效果

开启了PWA，就可以实现在手机等移动端有使用APP的效果，还是以之前学习使用的DEMO程序来测试。
我们只需要这样做：

先从apex中直接run你的apex app，复制浏览器地址栏中具体的url地址，复制发给手机。
然后手机复制这个地址，iPhone的话就在自带的Safari浏览器打开（注意不要微信直接打开，要使用手机的浏览器打开）

Safari浏览器网页登录后会发现有下面红框中标识的下载标志：

直接点击它会提示你具体的操作方法，如何添加到手机桌面，如下：

按这个方法操作，直接就会添加到你的手机桌面上，类似和手机APP一样的感觉：

点击打开就是这样的效果：

此刻，恍惚间居然有开发出一款手机APP的爽感，虽然它只是PWA（Progressive Web App）...

编者注：
PWA是网页的增强版，优势在于开发效率、跨平台和免安装，适合轻量级场景。
手机APP是原生体验的代表，优势在于性能与功能深度，适合高频复杂需求。
随着Web技术的演进，PWA的能力正在逼近原生应用，但两者仍会根据场景长期共存。

OK，把APEX程序变成“移动端APP”的演示结束，感兴趣的同学自己尝试下吧。

原创作者: jyzhao 转载于: https://www.cnblogs.com/jyzhao/p/18943673/apex-shi-zhan-di4pian-ru-he-baapex-cheng-xu-bian-c