Webber

强大的控制台工具，用于构建您的 swifweb 应用程序

macOS 10.15 和 Xcode 11.4 或更高版本。

或

swift.org 上支持的任何 ubuntu 版本

在 macOS 上，可以使用 Homebrew 安装 webber。请确保您已安装 Homebrew，然后运行

brew install swifweb/tap/webber

要更新已安装的版本，请运行

brew upgrade webber

1. 手动或通过 swiftlang.xyz 安装 swift
2. 安装 binaryen

apt-get install binaryen

3. 安装 wasmer

curl https://get.wasmer.io -sSfL | sh

4. 安装 npm

apt-get install npm

5. 安装 webber

cd /opt
git clone https://github.com/swifweb/webber
cd /opt/webber
swift build -c release
ln -s /opt/webber/.build/release/Webber /usr/bin/webber
exec bash

6. 在您的项目文件夹中开始使用它

要将 webber 更新到最新版本，只需执行

cd /opt/webber && git pull && swift build -c release

如果您已经有一个项目，只需在控制台中转到其文件夹

如果您没有，则手动 git clone 一个模板，然后转到其目录

您可以简单地执行 webber new 或手动克隆一个模板

git clone https://github.com/swifweb/spa-template myspawebsite
cd myspawebsite
open Package.swift # to work with code
webber serve # to launch in browser

渐进式 Web 应用

git clone https://github.com/swifweb/pwa-template mypwawebsite
cd mypwawebsite
open Package.swift # to work with code
webber serve -t pwa -s Service # to launch in browser

如果您的项目是 单页应用程序，那么此命令就足以开始工作

webber serve 

此命令执行以下操作

• 将您的项目编译为 webassembly 文件
• 准备所需的 html 和 js 文件，并将它们存储到项目目录中 .webber 隐藏文件夹中
• 启动本地 web 服务器
• 打开默认浏览器以查看您的 web 应用程序（默认情况下它在 http/2 上运行，带有自签名证书，因此请将其添加到系统）
• 监视项目目录中的更改，自动重建项目并更新浏览器中的页面

如果您克隆了 pwa 模板，则应额外提供以下参数

• -t pwa 告诉 webber 您的项目应作为 PWA 进行构建
• 您的 service worker 目标的名称，例如 -s Service

因此，最终 pwa 模板的 serve 命令可能如下所示

webber serve -t pwa -s Service -p 443 --browser chrome --browser-self-signed --browser-incognito

-v 或 --verbose 在控制台中显示更多信息，用于调试目的

-d 或 --debug-verbose 显示有关 webber 执行的每个步骤的更多详细信息

-p 443 或 --port 443 在 443 端口而不是默认的 8888 端口上启动 webber 服务器

--browser chrome/safari 自动打开所需的浏览器，默认情况下它不打开任何浏览器

--browser-self-signed 调试本地 service workers 所需，否则它们将无法工作

--browser-incognito 在隐身模式下打开浏览器的其他实例，仅适用于 chrome

--toolchain 设置自定义工具链，例如 webber serve --toolchain 5.9-SNAPSHOT-2023-08-06-a

对于 SPA，只需运行

webber release

对于 PWA，按以下方式执行

webber release  -t pwa -s Service

然后从 .webber/release/ 中获取您的文件

1. 按照 官方说明 安装 nginx
2. 编辑 /etc/nginx/mime.types 添加 application/wasm wasm; 以便正确提供 wasm 文件
3. 使用 letsencrypt（或任何其他方式）生成 SSL 证书
4. 像这样声明您的服务器

server {
    server_name yourdomain.com;

    listen [::]:443 ssl;
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
    
    ssl_session_cache    shared:SSL:10m;
    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    add_header Strict-Transport-Security "max-age=31536000; includeSubdomains;";
    ssl_stapling on;
    ssl_stapling_verify on;
    
    root /app/yourdomain.com/.webber/release;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
 	
    location ~* \.(js|jpg|png|css|wasm)$ {
        root /app/yourdomain.com/.webber/release;
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }
}

无限感谢 swiftwasm 组织，感谢他们的

• 为 webassembly 采用的出色 swift 分支
• 出色的 JavaScriptKit，它在 web 包的底层使用
• 出色的 carton 工具，它是创建 webber 以满足所有需求的灵感来源