rsnext/examples/with-docker-multi-env
Koji Onishi 430e71a38d
update Docker examples to specify HOSTNAME properly (#59756)
### What?

Update docker examples to correctly set HOSTNAME env variable for
standalone output

Related to PR:
https://github.com/vercel/next.js/pull/52804

### Why?
### TL;DR

The dockerfiile examples need to modified as that contains HOSTNAME
setting that apparently is not working as expected.

Related to Issue:
https://github.com/vercel/next.js/issues/58657

Affected examples:
https://github.com/vercel/next.js/tree/canary/examples/with-docker

https://github.com/vercel/next.js/tree/canary/examples/with-docker-multi-env

### Longer explanations

Based on [Docker
document](https://docs.docker.com/engine/reference/builder/#environment-replacement):
> You can also use environment variables with RUN, CMD, and ENTRYPOINT
instructions, but in those cases the variable substitution is handled by
the command shell, not the builder.

It means that when executing the last CMD ( `node server.js` ) in
Dockerfile samples, the HOSTNAME defined by prior `ENV` instruction is
simply ignored.

This causes problems typically when the host process sets HOSTNAME -
e.g. for instance when using AWS Fargate for deployment [we can't have
control over HOSTNAME](https://stackoverflow.com/a/52871552) set by the
host process. (also refer to the issue #58657 above)

### How?

Updated Dockerfilie samples, by setting HOSTNAME directly in CMD
instruction that launches nextjs server, not in the builder process.

Used this setting at my end (with AWS Fargate) to confirm that it fixes
the network problem.

Closes NEXT-
Fixes #58657

Co-authored-by: Sam Ko <sam@vercel.com>
2024-03-19 21:26:44 +00:00
..
docker update Docker examples to specify HOSTNAME properly (#59756) 2024-03-19 21:26:44 +00:00
pages chore(examples): use default prettier for examples/templates (#60530) 2024-01-11 16:01:44 -07:00
public [New Example] with docker - multiple deployment environments (#34015) 2022-02-05 18:13:01 +00:00
styles [New Example] with docker - multiple deployment environments (#34015) 2022-02-05 18:13:01 +00:00
.dockerignore Add .git to .dockerignore in docker examples (#34628) 2022-02-21 21:53:56 +01:00
.env [New Example] with docker - multiple deployment environments (#34015) 2022-02-05 18:13:01 +00:00
.env.development.sample [New Example] with docker - multiple deployment environments (#34015) 2022-02-05 18:13:01 +00:00
.env.production.sample [New Example] with docker - multiple deployment environments (#34015) 2022-02-05 18:13:01 +00:00
.env.staging.sample [New Example] with docker - multiple deployment environments (#34015) 2022-02-05 18:13:01 +00:00
.gitignore Add .yarn/install-state.gz to .gitignore (#56637) 2023-10-18 16:34:48 +00:00
Makefile [New Example] with docker - multiple deployment environments (#34015) 2022-02-05 18:13:01 +00:00
next.config.js chore(examples): use default prettier for examples/templates (#60530) 2024-01-11 16:01:44 -07:00
package.json Update Examples to use React 18 (#42027) 2022-10-28 17:43:20 +00:00
README.md Update pnpm create next-app for latest pnpm 6 and 7 (#37254) 2022-05-27 21:21:40 +00:00

With Docker - Multiple Deployment Environments

This examples shows how to use Docker with Next.js and deploy to multiple environment with different env values. Based on the deployment documentation.

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-docker-multi-env nextjs-docker-multi-env
# or
yarn create next-app --example with-docker-multi-env nextjs-docker-multi-env
# or
pnpm create next-app --example with-docker-multi-env nextjs-docker-multi-env

Enter the values in the .env.development.sample, .env.staging.sample, .env.production.sample files to be used for each environments.

Using Docker and Makefile

Development environment - for doing testing

make build-development
make start-development

Open http://localhost:3001

Staging environment - for doing UAT testing

make build-staging
make start-staging

Open http://localhost:3002

Production environment - for users

make build-production
make start-production

Open http://localhost:3003

Running Locally

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.