Merge pull request #29 from JakePartusch/feature/oai-private-s3

feat(experimental): Add support for using a private S3 bucket

.github/workflows/pr.yml

@@ -61,3 +61,23 @@ jobs:
       - run: lerna run prepack
       - run: cd examples/gatsby && yarn install && yarn build
       - run: yarn sui deploy --compiled-build --dir="examples/gatsby/public"
+  deploy-privateS3-preview:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: "14.x"
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: us-west-2
+      - run: npm install -g lerna
+      - run: lerna bootstrap
+      - run: lerna run prepack
+      - run: cd examples/private-s3 && yarn install && yarn build
+      - run: yarn sui deploy --compiled-build --dir="examples/private-s3/public"

README.md

@@ -27,12 +27,24 @@
 
 - **Own your code** Skip the 3rd Party services — get all of the benefits and security of a hosted AWS application, without going through a middleman. Deploy to a new AWS account, or an existing account and get up and running in five minutes!
 
-## What’s In This Document
-
-- [Get Up and Running in 5 Minutes](#-get-up-and-running-in-5-minutes)
-- [CLI Reference](#-cli-reference)
+## What's in this Document
+
+- [What's in this Document](#whats-in-this-document)
+- [🚀 Get Up and Running in 5 Minutes](#-get-up-and-running-in-5-minutes)
+- [📖 CLI Reference](#-cli-reference)
+  - [`deploy`](#deploy)
+    - [Options](#options)
+    - [Examples](#examples)
+  - [`configure-domain`](#configure-domain)
+    - [Options](#options-1)
+    - [Examples](#examples-1)
+    - [Additional Steps](#additional-steps)
 - [Continuous Integration](#continuous-integration)
-- [Advanced Use Cases](#-advanced-use-cases)
+  - [GitHub Actions](#github-actions)
+- [👩‍🔬 Experimental Features](#-experimental-features)
+  - [\_\_experimental_privateS3](#__experimental_privates3)
+- [👩‍💻 Advanced Use Cases](#-advanced-use-cases)
+  - [Serverless UI Advanced Example](#serverless-ui-advanced-example)
 - [FAQ](#faq)
 - [License](#license)
 
@@ -180,9 +192,7 @@ A minute or two after running this command, the deploy will "hang" while trying
 
 Since Serverless UI is a command-line tool available via npm, it will work in almost any CI environment.
 
-### Examples
-
-#### GitHub Actions
+### GitHub Actions
 
 > Note: Checkout the action in this repo for a live example https://github.com/JakePartusch/serverlessui/actions
 
@@ -231,17 +241,29 @@ jobs:
             });
 ```
 
-## 👩‍🔬 Advanced Use Cases
+## 👩‍🔬 Experimental Features
+
+In order to use experimental features, a `serverlessui.config.js` file must exist at the base of the project.
+
+### \_\_experimental_privateS3
+
+This experimental feature allows the configuration of a private S3 bucket — which may be desired for enhanced security. This feature can be enabled in `serverlessui.config.js`:
+
+```javascript
+module.exports = {
+  __experimental_privateS3: true,
+};
+```
+
+## 👩‍💻 Advanced Use Cases
 
 For existing serverless projects or those that may have additional CloudFormation and/or CDK infrastructure, Serverless UI provides CDK constructs for each of the cli actions:
 
 ```javascript
 import { ServerlessUI, DomainCertificate } from '@serverlessui/construct;
 ```
 
-### Examples
-
-#### Serverless UI
+### Serverless UI Advanced Example
 
 For a full-featured example, check out:
 https://github.com/JakePartusch/serverlessui-advanced-example

examples/private-s3/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.cache/
+public

examples/private-s3/README.md

@@ -0,0 +1,12 @@
+# Gatsby Example Website for Serverless UI
+
+This is simple Gatsby website that can be deployed with Serverless UI. We use this website for integration tests in this repository.
+
+Try it yourself with:
+
+```shell
+npm install -g @serverlessui/cli
+npm install
+npm run build
+sui deploy --dir="public"
+```

examples/private-s3/gatsby-config.js

@@ -0,0 +1,25 @@
+module.exports = {
+  siteMetadata: {
+    title: "gatsby",
+  },
+  plugins: [
+    "gatsby-plugin-image",
+    "gatsby-plugin-react-helmet",
+    {
+      resolve: "gatsby-plugin-manifest",
+      options: {
+        icon: "src/images/icon.png",
+      },
+    },
+    "gatsby-plugin-sharp",
+    "gatsby-transformer-sharp",
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "images",
+        path: "./src/images/",
+      },
+      __key: "images",
+    },
+  ],
+};

examples/private-s3/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "private-s3",
+  "version": "1.0.0",
+  "private": true,
+  "description": "gatsby",
+  "author": "Jake Partusch",
+  "keywords": [
+    "gatsby"
+  ],
+  "scripts": {
+    "develop": "gatsby develop",
+    "start": "gatsby develop",
+    "build": "gatsby build",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean"
+  },
+  "dependencies": {
+    "gatsby": "^3.0.1",
+    "gatsby-plugin-image": "^1.0.0",
+    "gatsby-plugin-manifest": "^3.0.0",
+    "gatsby-plugin-react-helmet": "^4.0.0",
+    "gatsby-plugin-sharp": "^3.0.0",
+    "gatsby-plugin-sitemap": "^3.0.0",
+    "gatsby-source-filesystem": "^3.0.0",
+    "gatsby-transformer-sharp": "^3.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-helmet": "^6.1.0"
+  },
+  "devDependencies": {}
+}

examples/private-s3/serverlessui.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  domain: "serverlessui.app",
+  zoneId: "Z10061011Y616GGTRN1OW",
+  certificateArn:
+    "arn:aws:acm:us-east-1:857786057494:certificate/be831128-bb68-4fcd-b903-4d112d8fd2cd",
+  __experimental_privateS3: true,
+};

examples/private-s3/src/pages/404.js

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { Link } from "gatsby"
+
+// styles
+const pageStyles = {
+  color: "#232129",
+  padding: "96px",
+  fontFamily: "-apple-system, Roboto, sans-serif, serif",
+}
+const headingStyles = {
+  marginTop: 0,
+  marginBottom: 64,
+  maxWidth: 320,
+}
+
+const paragraphStyles = {
+  marginBottom: 48,
+}
+const codeStyles = {
+  color: "#8A6534",
+  padding: 4,
+  backgroundColor: "#FFF4DB",
+  fontSize: "1.25rem",
+  borderRadius: 4,
+}
+
+// markup
+const NotFoundPage = () => {
+  return (
+    <main style={pageStyles}>
+      <title>Not found</title>
+      <h1 style={headingStyles}>Page not found</h1>
+      <p style={paragraphStyles}>
+        Sorry{" "}
+        <span role="img" aria-label="Pensive emoji">
+          😔
+        </span>{" "}
+        we couldn’t find what you were looking for.
+        <br />
+        {process.env.NODE_ENV === "development" ? (
+          <>
+            <br />
+            Try creating a page in <code style={codeStyles}>src/pages/</code>.
+            <br />
+          </>
+        ) : null}
+        <br />
+        <Link to="/">Go home</Link>.
+      </p>
+    </main>
+  )
+}
+
+export default NotFoundPage