430e71a38d
### 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> |
||
|---|---|---|
| .. | ||
| pages | ||
| public | ||
| styles | ||
| .dockerignore | ||
| .gitignore | ||
| app.json | ||
| Dockerfile | ||
| next.config.js | ||
| package.json | ||
| README.md | ||
With Docker
This examples shows how to use Docker with Next.js based on the deployment documentation. Additionally, it contains instructions for deploying to Google Cloud Run. However, you can use any container-based deployment host.
How to use
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-docker nextjs-docker
# or
yarn create next-app --example with-docker nextjs-docker
# or
pnpm create next-app --example with-docker nextjs-docker
Using Docker
- Install Docker on your machine.
- Build your container:
docker build -t nextjs-docker .. - Run your container:
docker run -p 3000:3000 nextjs-docker.
You can view your images created with docker images.
In existing projects
To add support for Docker to an existing project, just copy the Dockerfile into the root of the project and add the following to the next.config.js file:
// next.config.js
module.exports = {
// ... rest of the configuration.
output: "standalone",
};
This will build the project as a standalone app inside the Docker image.
Deploying to Google Cloud Run
-
Install the Google Cloud SDK so you can use
gcloudon the command line. -
Run
gcloud auth loginto log in to your account. -
Create a new project in Google Cloud Run (e.g.
nextjs-docker). Ensure billing is turned on. -
Build your container image using Cloud Build:
gcloud builds submit --tag gcr.io/PROJECT-ID/helloworld --project PROJECT-ID. This will also enable Cloud Build for your project. -
Deploy to Cloud Run:
gcloud run deploy --image gcr.io/PROJECT-ID/helloworld --project PROJECT-ID --platform managed --allow-unauthenticated. Choose a region of your choice.- You will be prompted for the service name: press Enter to accept the default name,
helloworld. - You will be prompted for region: select the region of your choice, for example
us-central1.
- You will be prompted for the service name: press Enter to accept the default name,
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.