[New Example] with docker - multiple deployment environments

[nguyenyou]

Documentation / Examples

• Make sure the linting passes by running yarn lint

---

Context

Having 3 environments:

• Development: for doing testing
• Staging: for doing UAT testing
• Production: for users

In each environment, the Next.js application makes API calls to the corresponding API gateway:

• Development: https://api-development.com
• Staging: https://api-staging.com
• Production: https://api-production.com

Using NEXT_PUBLIC_API_URL for the baseUrl of axios.

Since the NEXT_PUBLIC_API_URL is replaced during build time, we have to manage to provide the corresponding .env.production files for Docker at build time for each environment.

Solution

Since we are using CI services for dockerization, we could setup the CI to inject the correct .env.production file into the cloned source code, (this is actually what we did). Doing that would require us to touch the CI settings.

Another way is using multiple Dockerfile (the former only need to use one Dockerfile), and the trick is copying the corresponding env*.sample and rename it to .env.production then putting it into the Docker context. Doing this way, everything is managed in the source code.

> Dockerfile

# Development environment
COPY .env.development.sample .env.production

# Staging environment
COPY .env.staging.sample .env.production

# Production environment
COPY .env.production.sample .env.production

Testing these images locally is also simple, by issuing the corresponding Makefile commands we can simulate exactly how the image will be built in the CI environment.

How to use

For development environment:

make build-development
make start-development

For staging environment:

make build-staging
make start-staging

For production environment:

make build-production
make start-production

Conclusion

This example shows one way to solve the three-environment model in software development when building a Next.js application. There might be another better way and I would love to know about them as well.

I'm making this example because I can't find any example about this kind of problem.

[leerob]

This is great 😄 Any reason for closing? Happy to review and merge.

[nguyenyou]

@leerob I'm glad to here that 😄 I closed it because I'm not so confident that this example will be reviewed and merged. 😅

[leerob]

Looks great to me!

[nguyenyou]

@leerob I just fixed the linter error 🥲