1
0
Fork 0
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:
Tim Neutkens 2018-05-05 14:23:05 +02:00
commit 3685c30fb4
9 changed files with 126 additions and 2 deletions

View file

@ -0,0 +1,3 @@
.next/
node_modules/
Dockerfile

View file

@ -0,0 +1,10 @@
FROM mhart/alpine-node
WORKDIR /app
COPY . .
RUN yarn install
RUN yarn build
EXPOSE 3000
CMD ["yarn", "start"]

View 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"]

View 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.

View 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
}
}

View 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"
}
}

View 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>
}
}

View file

@ -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)

View file

@ -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",