|
1 | | -# With Docker |
| 1 | +# Next.js application sample |
2 | 2 |
|
3 | | -This examples shows how to use Docker with Next.js based on the [deployment documentation](https://nextjs.org/docs/deployment#docker-image). Additionally, it contains instructions for deploying to Google Cloud Run. However, you can use any container-based deployment host. |
4 | | - |
5 | | -## How to use |
6 | | - |
7 | | -Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: |
8 | | - |
9 | | -```bash |
10 | | -npx create-next-app --example with-docker nextjs-docker |
11 | | -# or |
12 | | -yarn create next-app --example with-docker nextjs-docker |
13 | | -# or |
14 | | -pnpm create next-app --example with-docker nextjs-docker |
15 | | -``` |
16 | | - |
17 | | -## Using Docker |
18 | | - |
19 | | -1. [Install Docker](https://docs.docker.com/get-docker/) on your machine. |
20 | | -1. Build your container: `docker build -t nextjs-docker .`. |
21 | | -1. Run your container: `docker run -p 3000:3000 nextjs-docker`. |
22 | | - |
23 | | -You can view your images created with `docker images`. |
24 | | - |
25 | | -### In existing projects |
26 | | - |
27 | | -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: |
28 | | - |
29 | | -```js |
30 | | -// next.config.js |
31 | | -module.exports = { |
32 | | - // ... rest of the configuration. |
33 | | - output: 'standalone', |
34 | | -} |
35 | | -``` |
36 | | - |
37 | | -This will build the project as a standalone app inside the Docker image. |
38 | | - |
39 | | -## Deploying to Google Cloud Run |
40 | | - |
41 | | -1. Install the [Google Cloud SDK](https://cloud.google.com/sdk/docs/install) so you can use `gcloud` on the command line. |
42 | | -1. Run `gcloud auth login` to log in to your account. |
43 | | -1. [Create a new project](https://cloud.google.com/run/docs/quickstarts/build-and-deploy) in Google Cloud Run (e.g. `nextjs-docker`). Ensure billing is turned on. |
44 | | -1. 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. |
45 | | -1. Deploy to Cloud Run: `gcloud run deploy --image gcr.io/PROJECT-ID/helloworld --project PROJECT-ID --platform managed`. Choose a region of your choice. |
46 | | - |
47 | | - - You will be prompted for the service name: press Enter to accept the default name, `helloworld`. |
48 | | - - You will be prompted for [region](https://cloud.google.com/run/docs/quickstarts/build-and-deploy#follow-cloud-run): select the region of your choice, for example `us-central1`. |
49 | | - - You will be prompted to **allow unauthenticated invocations**: respond `y`. |
50 | | - |
51 | | -Or click the button below, authorize the script, and select the project and region when prompted: |
52 | | - |
53 | | -[](https://deploy.cloud.run/?git_repo=https://github.com/vercel/next.js.git&dir=examples/with-docker) |
54 | | - |
55 | | -## Running Locally |
56 | | - |
57 | | -First, run the development server: |
58 | | - |
59 | | -```bash |
60 | | -npm run dev |
61 | | -# or |
62 | | -yarn dev |
63 | | -``` |
64 | | - |
65 | | -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. |
66 | | - |
67 | | -You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. |
68 | | - |
69 | | -[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. |
70 | | - |
71 | | -The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. |
| 3 | +[Hosting guide](https://easypanel.io/docs/quickstarts/nextjs) |
0 commit comments