Serve Swagger UI JS and CSS files from Cloudflare CDN

This removes the dependency on NPM in production.
4 weeks ago · a2929df6b6
8 changed files with 18 additions and 27 deletions
--- a/ansible/playbook.yml
+++ b/ansible/playbook.yml
@ -38,7 +38,6 @@
    - redis_module_cell
    - postgresql_redis_bridge
    - boussole
-    - nodejs
    - swagger_ui
    - webassets
    - scripts
@ -56,6 +55,7 @@
  roles:
    - prometheus
    - java
+    - nodejs
    - development

 - hosts: prod
--- a/ansible/roles/nginx_site_config/templates/tildes.conf.jinja2
+++ b/ansible/roles/nginx_site_config/templates/tildes.conf.jinja2
@ -18,6 +18,9 @@ map $request_uri $csp_header {
    # The CSP for the Stripe donation page:
    # - "https://js.stripe.com" in script-src and frame-src is needed for Stripe
    "~^/donate_stripe$" "default-src 'none'; script-src 'self' https://js.stripe.com; style-src 'self'; img-src 'self' data:; connect-src 'self'; manifest-src 'self'; frame-src 'self' https://js.stripe.com; form-action 'self'; frame-ancestors 'none'; base-uri 'none'";
+    # The CSP for the OpenAPI (Swagger) UI page:
+    # - "https://cdnjs.cloudflare.com" in script-src and style-src is needed for Swagger UI
+    "~^/api/beta/ui$" "default-src 'none'; script-src 'self' https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/; style-src 'self' https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/; img-src 'self' data:; connect-src 'self'; manifest-src 'self'; form-action 'self'; frame-ancestors 'none'; base-uri 'none'";
 }

 server {
--- a/ansible/roles/swagger_ui/files/index.html
+++ b/ansible/roles/swagger_ui/files/index.html
@ -3,14 +3,14 @@
  <head>
    <meta charset="UTF-8">
    <title>Swagger UI</title>
-    <link rel="stylesheet" type="text/css" href="/swagger-ui/swagger-ui.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/${ui_version}/swagger-ui.css" />
    <link rel="stylesheet" type="text/css" href="/swagger-ui/index.css" />
  </head>

  <body>
    <div id="swagger-ui"></div>
-    <script src="/swagger-ui/swagger-ui-bundle.js" charset="UTF-8"> </script>
-    <script src="/swagger-ui/swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/${ui_version}/swagger-ui-bundle.js" charset="UTF-8"> </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/${ui_version}/swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
    <script src="/swagger-ui/index.js" charset="UTF-8"> </script>
  </body>
 </html>
--- a/ansible/roles/swagger_ui/meta/main.yml
+++ b/ansible/roles/swagger_ui/meta/main.yml
@ -1,3 +0,0 @@
---
-dependencies:
-  - role: nodejs
--- a/ansible/roles/swagger_ui/tasks/main.yml
+++ b/ansible/roles/swagger_ui/tasks/main.yml
@ -1,28 +1,22 @@
 ---
- name: Copy swagger-ui web assets from node package
-  copy:
-    src: "{{ app_dir }}/node_modules/swagger-ui/dist/"
-    dest: "{{ app_dir }}/static/swagger-ui/"
-    owner: "{{ app_username }}"
-    group: "{{ app_username }}"
-    mode: 0755
-    remote_src: true
-
 - name: Copy our own custom swagger-ui web assets
  block:
-    - copy:
+    - name: Copy our own custom swagger-ui index.html
+      copy:
        src: "index.html"
        dest: "{{ app_dir }}/static/swagger-ui/index.html"
        owner: "{{ app_username }}"
        group: "{{ app_username }}"
        mode: 0644
-    - copy:
+    - name: Copy our own custom swagger-ui index.css
+      copy:
        src: "index.css"
        dest: "{{ app_dir }}/static/swagger-ui/index.css"
        owner: "{{ app_username }}"
        group: "{{ app_username }}"
        mode: 0644
-    - copy:
+    - name: Copy our own custom swagger-ui index.js
+      copy:
        src: "index.js"
        dest: "{{ app_dir }}/static/swagger-ui/index.js"
        owner: "{{ app_username }}"
--- a/tildes/package.json
+++ b/tildes/package.json
@ -8,9 +8,7 @@
    "lint:js": "node node_modules/eslint/bin/eslint.js static/js/",
    "lint:scss": "node node_modules/stylelint/bin/stylelint.js scss/"
  },
-  "dependencies": {
-    "swagger-ui": "^5.27.1"
-  },
+  "dependencies": {},
  "devDependencies": {
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^4.3.0",
@ -19,9 +17,6 @@
    "stylelint": "^10.0.1",
    "stylelint-scss": "^3.6.0"
  },
-  "scarfSettings": {
-    "enabled": false
-  },
  "eslintConfig": {
    "env": {
      "browser": true
--- a/tildes/prospector.yaml
+++ b/tildes/prospector.yaml
@ -5,7 +5,6 @@ max-line-length: 88

 ignore-paths:
  - alembic
-  - static/swagger-ui

 pep8:
  disable:
--- a/tildes/tildes/routes.py
+++ b/tildes/tildes/routes.py
@ -18,6 +18,7 @@ from tildes.resources.user import user_by_username

 OPENAPI_YAML_FILE = "/opt/tildes/openapi_beta.yaml"
 SWAGGER_UI_HTML_FILE = "/opt/tildes/static/swagger-ui/index.html"
+SWAGGER_UI_VERSION = "5.27.1"


 def includeme(config: Configurator) -> None:
@ -136,7 +137,9 @@ def includeme(config: Configurator) -> None:
    # We also provide a path for the full spec and the built-in swagger UI explorer
    config.pyramid_openapi3_spec(OPENAPI_YAML_FILE, route="/api/beta/openapi.yaml")
    config.pyramid_openapi3_add_explorer(
-        route="/api/beta/ui", template=SWAGGER_UI_HTML_FILE
+        route="/api/beta/ui",
+        template=SWAGGER_UI_HTML_FILE,
+        ui_version=SWAGGER_UI_VERSION,
    )

    with config.route_prefix_context("/api/beta"):