mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Merge branch 'master' into canary
This commit is contained in:
commit
3685c30fb4
3
examples/with-docker/.dockerignore
Normal file
3
examples/with-docker/.dockerignore
Normal file
|
@ -0,0 +1,3 @@
|
|||
.next/
|
||||
node_modules/
|
||||
Dockerfile
|
10
examples/with-docker/Dockerfile
Normal file
10
examples/with-docker/Dockerfile
Normal file
|
@ -0,0 +1,10 @@
|
|||
FROM mhart/alpine-node
|
||||
|
||||
WORKDIR /app
|
||||
COPY . .
|
||||
|
||||
RUN yarn install
|
||||
RUN yarn build
|
||||
|
||||
EXPOSE 3000
|
||||
CMD ["yarn", "start"]
|
14
examples/with-docker/Dockerfile.multistage
Normal file
14
examples/with-docker/Dockerfile.multistage
Normal file
|
@ -0,0 +1,14 @@
|
|||
# Do the npm install or yarn install in the full image
|
||||
FROM mhart/alpine-node AS builder
|
||||
WORKDIR /app
|
||||
COPY package.json .
|
||||
RUN yarn install
|
||||
COPY . .
|
||||
RUN yarn build
|
||||
|
||||
# And then copy over node_modules, etc from that stage to the smaller base image
|
||||
FROM mhart/alpine-node:base
|
||||
WORKDIR /app
|
||||
COPY --from=builder /app .
|
||||
EXPOSE 3000
|
||||
CMD ["node_modules/.bin/next", "start"]
|
58
examples/with-docker/README.md
Normal file
58
examples/with-docker/README.md
Normal file
|
@ -0,0 +1,58 @@
|
|||
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-docker&env=API_URL&docker=true)
|
||||
|
||||
# With Docker
|
||||
|
||||
## How to use
|
||||
|
||||
### Using `create-next-app`
|
||||
|
||||
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
|
||||
|
||||
```bash
|
||||
npx create-next-app --example with-docker with-docker-app
|
||||
# or
|
||||
yarn create next-app --example with-docker with-docker-app
|
||||
```
|
||||
|
||||
### Download manually
|
||||
|
||||
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
||||
|
||||
```bash
|
||||
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-docker
|
||||
cd with-docker
|
||||
```
|
||||
|
||||
Build it with docker:
|
||||
|
||||
```bash
|
||||
# build
|
||||
docker build -t next-app .
|
||||
# or, use multi-stage builds to build a smaller docker image
|
||||
docker build -t next-app -f ./Dockerfile.multistage .
|
||||
```
|
||||
|
||||
Run it:
|
||||
|
||||
```bash
|
||||
docker run --rm -it \
|
||||
-p 3000:3000 \
|
||||
-e "API_URL=https://example.com" \
|
||||
next-app
|
||||
```
|
||||
|
||||
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
|
||||
|
||||
```bash
|
||||
now --docker -e API_URL="https://example.com"
|
||||
```
|
||||
|
||||
>*Note: Multi-stage only works in OSS plan. [\[#962\]](https://github.com/zeit/now-cli/issues/962#issuecomment-383860104)*
|
||||
|
||||
## The idea behind the example
|
||||
|
||||
This example show how to set custom environment variables for your __docker application__ at runtime.
|
||||
|
||||
The `dockerfile` is the simplest way to run Next.js app in docker, and the size of output image is `173MB`. However, for an even smaller build, you can do multi-stage builds with `dockerfile.multistage`. The size of output image is `85MB`.
|
||||
|
||||
You can check the [Example Dockerfile for your own Node.js project](https://github.com/mhart/alpine-node/tree/43ca9e4bc97af3b1f124d27a2cee002d5f7d1b32#example-dockerfile-for-your-own-nodejs-project) section in [mhart/alpine-node](https://github.com/mhart/alpine-node) for more details.
|
9
examples/with-docker/next.config.js
Normal file
9
examples/with-docker/next.config.js
Normal file
|
@ -0,0 +1,9 @@
|
|||
// next.config.js
|
||||
module.exports = {
|
||||
serverRuntimeConfig: { // Will only be available on the server side
|
||||
mySecret: 'secret'
|
||||
},
|
||||
publicRuntimeConfig: { // Will be available on both server and client
|
||||
API_URL: process.env.API_URL
|
||||
}
|
||||
}
|
12
examples/with-docker/package.json
Normal file
12
examples/with-docker/package.json
Normal file
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "latest",
|
||||
"react": "16.2.0",
|
||||
"react-dom": "16.2.0"
|
||||
}
|
||||
}
|
18
examples/with-docker/pages/index.js
Normal file
18
examples/with-docker/pages/index.js
Normal file
|
@ -0,0 +1,18 @@
|
|||
import React from 'react'
|
||||
import getConfig from 'next/config'
|
||||
const { publicRuntimeConfig } = getConfig()
|
||||
|
||||
const { API_URL } = publicRuntimeConfig
|
||||
|
||||
export default class extends React.Component {
|
||||
static async getInitialProps () {
|
||||
// fetch(`${API_URL}/some-path`)
|
||||
return {}
|
||||
}
|
||||
|
||||
render () {
|
||||
return <div>
|
||||
The API_URL is {API_URL}
|
||||
</div>
|
||||
}
|
||||
}
|
|
@ -48,4 +48,4 @@ now
|
|||
```
|
||||
|
||||
## The idea behind the example
|
||||
This example is based on the great work of [with-redux](https://github.com/zeit/next.js/tree/v3-beta/examples/with-redux) example with the addition of [reselect](https://github.com/reactjs/reselect) and [recompose](https://github.com/acdlite/recompose)
|
||||
This example is based on the great work of [with-redux](https://github.com/zeit/next.js/blob/master/examples/with-redux/) example with the addition of [reselect](https://github.com/reactjs/reselect) and [recompose](https://github.com/acdlite/recompose)
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "next",
|
||||
"version": "6.0.0-canary.7",
|
||||
"version": "6.0.0",
|
||||
"description": "Minimalistic framework for server-rendered React applications",
|
||||
"main": "./dist/server/next.js",
|
||||
"license": "MIT",
|
||||
|
|
Loading…
Reference in a new issue