Merge pull request #417 from DefangLabs/lio/nextjs-static

Add static-files example

Author: lionello

README.md

@@ -11,12 +11,29 @@ A basic Next.js app with a Dockerfile and compose.yaml ready to deploy to AWS wi
 3. (optional) [Authenticate with AWS](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html)
 4. Run `defang compose up` in the root of this project
 
+## Static Files (Experimental)
+
+This example supports deployment to AWS as a static site. Static files will be copied to an S3 bucket. In the _affordable_
+deployment mode (the default), the static files will be served over HTTP from an S3 bucket.
+
+:::info
+Note that some top-level domains (TLDs), such as `.app`, require HSTS, which will disallow browsers from accessing the site over HTTP. If you want to use such a TLD, you must serve the static files over HTTPS by using either the _balanced_ or _high_availability_ deployment mode.
+:::
+
+To serve the static files over HTTPS, use either the _balanced_ or _high_availability_ deployment mode, which will create a CloudFront distribution in front of the S3 bucket.
+
+To deploy this project as a static site, run:
+
+```bash
+defang compose up -f compose.static.yaml --provider=aws --mode=balanced
+```
+
 ---
 
 Title: Next.js
 
 Short Description: A basic Next.js app.
 
-Tags: Next.js, React, Docker, Node.js, TypeScript, JavaScript
+Tags: Next.js, React, Docker, Node.js, TypeScript, JavaScript, Static
 
 Languages: nodejs

app/.dockerignore

@@ -1,2 +1,3 @@
 node_modules
-.next
+.next
+out

app/Dockerfile

@@ -14,8 +14,15 @@ RUN npm install
 COPY . .
 
 # Build the Next.js app
+ARG NEXT_OUTPUT
 RUN npm run build
 
+# If we're doing an export, copy all files from the out directory to /static
+# This is a workaround for Next.JS issue https://github.com/vercel/next.js/issues/59988
+RUN if [ "$NEXT_OUTPUT" = "export" ]; then \
+    cp -R out/* /static/; \
+    fi
+
 # Expose the port that your app runs on
 EXPOSE 3000
 

app/next.config.mjs

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  output: process.env.NEXT_OUTPUT,
+};
 
 export default nextConfig;

compose.static.yaml

@@ -0,0 +1,10 @@
+services:
+  app:
+    extends:
+      file: compose.yaml
+      service: app
+    build:
+      args:
+        NEXT_OUTPUT: export
+    x-defang-static-files:
+      folder: /static

compose.yaml

@@ -1,7 +1,7 @@
 services:
   app:
     restart: unless-stopped
-    # domainname: mydomain.com # if you want to use your own domain
+    # domainname: www.example.xyz # uncomment if you want to use your own domain
     build:
       context: ./app
       dockerfile: Dockerfile
@@ -17,5 +17,5 @@ services:
     deploy:
       resources:
         reservations:
-          cpus: '0.50'
-          memory: 512M
+          cpus: "0.25"
+          memory: 256M