You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When we rebranded Defang, we knew our website needed more than just a fresh coat of paint. It needed to become a more dynamic part of our stack. We needed some parts to be more flexible, some parts to be more interactive, and better aligned with how modern apps are organized and deployed. And what better way to take it there than to deploy it with Defang itself?
10
+
When we refreshed the Defang brand, we knew our website needed more than just a fresh coat of paint. It needed to become a more dynamic part of our stack. We needed some parts to be more flexible, some parts to be more interactive, and better aligned with how modern apps are organized and deployed. And what better way to take it there than to deploy it with Defang itself?
11
11
12
12
This is part of our ongoing "Defang on Defang" series, where we show how we're using our own tool to deploy all the services that power Defang. In this post, we're diving into how we turned our own website into a project to better understand how Defang can be used to deploy a dynamic Next.js apps and how we can improve the experience for developers.
13
13
14
14
---
15
15
16
16
## From S3 + CloudFront to Dynamic, Containerized Deployments
17
17
18
-
Our original site was a Next.js app using [static exports](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) deployed via S3 and fronted by CloudFront. That setup worked for a while—it was fast and simple. But with our rebrand, we added pages and components where it made sense to use (and test for other developers) some Next.js features that we couldn't use with the static export:
18
+
Our original site was a Next.js app using [static exports](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) deployed via S3 and fronted by CloudFront. That setup worked for a while—it was fast and simple. But with our brand refresh, we added pages and components where it made sense to use (and test for other developers) some Next.js features that we couldn't use with the static export:
19
19
20
20
-[React Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)
@@ -33,15 +33,15 @@ We already deploy our other services with Defang using Compose files. In fact, t
33
33
34
34
Some things we had to change:
35
35
36
-
**Adding ports to the Compose file**:
36
+
**Adding [ports](https://docs.defang.io/docs/concepts/compose#ports) to the Compose file**:
37
37
```yaml
38
38
ports:
39
39
- mode: ingress
40
40
target: 3000
41
41
published: 3000
42
42
```
43
43
44
-
**Adding domain info the Composer file**:
44
+
**Adding [domain](https://docs.defang.io/docs/concepts/domains) info the Composer file**:
45
45
```yaml
46
46
domainname: defang.io
47
47
networks:
@@ -64,7 +64,7 @@ Deploying the website wasn't just a checkbox—it helped surface real-world pain
64
64
Even though the site is dynamic now, we still want assets like `/_next/static` to load quickly from a CDN. This made it clear that CDN support—like CloudFront integration—should be easier to configure in Defang. That’s now on our roadmap. That's also going to be useful for other frameworks that use similar asset paths, like Django.
65
65
66
66
### 2. Next.js Env Vars Can Be Tricky in Containers
67
-
Next.js splits env vars between build-time and runtime, and the rules aren’t always obvious. Some need to be passed as build args, and others as runtime envs. That made us think harder about how Defang (or our docs) could help clarify or streamline this for developers—even if we can’t change that aspect of Next.js itself.
67
+
Next.js splits env vars between build-time and runtime, and the rules aren’t always obvious. Some need to be passed as build args, and others as runtime envs. That made us think harder about how Defang could help clarify or streamline this for developers—even if we can’t change that aspect of Next.js itself.
68
68
69
69
### 3. Redirects and Rewrites
70
70
We had to add a middleware to handle www to non-www redirects. This is a common need, so we're keeping an eye on how we can make this easier to deal with in Defang projects.
@@ -79,7 +79,7 @@ Our site now runs like the rest of our infrastructure:
79
79
80
80
- Fully containerized
81
81
- Deployed to our own AWS account
82
-
- Managed with a Composer file
82
+
- Managed with a Compose file
83
83
- Deployed with Defang
84
84
85
85
Stay tuned for the next post in the series—because this is just one piece of the puzzle.
0 commit comments