docker[4]-front

docker 评论

查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

docker inspect -f "{{ .NetworkSettings }}" f20
docker build -t friendlyhello .  # Create image using this directory's Dockerfile
docker run -p 4000:80 friendlyhello  # Run "friendlyhello" mapping port 4000 to 80
docker run -d -p 4000:80 friendlyhello         # Same thing, but in detached mode
docker container ls                                # List all running containers
docker container ls -a             # List all containers, even those not running
docker container stop <hash>           # Gracefully stop the specified container
docker container kill <hash>         # Force shutdown of the specified container
docker container rm <hash>        # Remove specified container from this machine
docker container rm $(docker container ls -a -q)         # Remove all containers
docker image ls -a                             # List all images on this machine
docker image rm <image id>            # Remove specified image from this machine
docker image rm $(docker image ls -a -q)   # Remove all images from this machine
docker login             # Log in this CLI session using your Docker credentials
docker tag <image> username/repository:tag  # Tag <image> for upload to registry
docker push username/repository:tag            # Upload tagged image to registry
docker run username/repository:tag                   # Run image from a registry

 docker stop 'docker ps -q'   #stop all the running containers

创建react应用并用vscode打开

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
$ create-react-app frontend

Creating a new React app in /Users/jackson/Downloads/frontend.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...


> fsevents@1.2.7 install /Users/jackson/Downloads/frontend/node_modules/chokidar/node_modules/fsevents
> node install

[fsevents] Success: "/Users/jackson/Downloads/frontend/node_modules/chokidar/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote

> fsevents@1.2.4 install /Users/jackson/Downloads/frontend/node_modules/fsevents
> node install

[fsevents] Success: "/Users/jackson/Downloads/frontend/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
+ react@16.8.3
+ react-scripts@2.1.5
+ react-dom@16.8.3
added 1948 packages from 733 contributors and audited 36230 packages in 147.639s
found 63 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

Initialized a git repository.

Success! Created frontend at /Users/jackson/Downloads/frontend
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd frontend
  npm start

Happy hacking!
jacksondeMacBook-Pro:Downloads jackson$ code frontend

新建Dockerfile.dev

1
2
3
4
5
6
7
8
9
FROM node:alpine

WORKDIR '/app'

COPY package.json .
RUN npm install
COPY . .

CMD ["npm","run","start"]

删除node_moudles

构建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$ docker build -f Dockerfile.dev .
Sending build context to Docker daemon  914.9kB
Step 1/6 : FROM node:alpine
 ---> 4e50ad7c0e0b
Step 2/6 : WORKDIR '/app'
 ---> Using cache
 ---> e99f36e2e99d
Step 3/6 : COPY package.json .
 ---> Using cache
 ---> c5c9213cbf46
Step 4/6 : RUN npm install
 ---> Using cache
 ---> a770342ca69a
Step 5/6 : COPY . .
 ---> 7c0e4f289ad5
Step 6/6 : CMD ["npm","run","start"]
 ---> Running in c9fd7f9cfbbe
Removing intermediate container c9fd7f9cfbbe
 ---> 80bf791492c9
Successfully built 80bf791492c9

运行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ docker run -p 3000:3000 80bf791492c9

> frontend@0.1.0 start /app
> react-scripts start

Starting the development server...

Compiled successfully!

You can now view frontend in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://172.17.0.2:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

访问

打开浏览器访问localhost:3000即可访问react首页

1
2
3
4
5
6
7
8
9
If you are running on Windows, please read this: Create-React-App has some issues detecting when files get changed on Windows based machines.  To fix this, please do the following:

In the root project directory, create a file called .env

Add the following text to the file and save it: CHOKIDAR_USEPOLLING=true

That's all!

For more on why this is required, you can check out: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-start-doesn-t-detect-changes

如果要修改react首页的App.js，我们不希望从新生成image。
其中(pwd)代表当前路径 (pwd):/app代表当前路径映射到container中的/app
-v /app/node_modules 代表使用container中的node_moudles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ docker run -p 3000:3000 -v /app/node_modules -v $(pwd):/app 80bf791492c9

> frontend@0.1.0 start /app
> react-scripts start

Starting the development server...

Compiled successfully!

You can now view frontend in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://172.17.0.2:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

测试第一种方式

1
2
3
4
5
6
7
8
9
测试：
docker build -f Dockerfile.dev .
docker run -it d0ec57f38348 npm run test


动态测试的一种方式：
docker-compose up
新开一个窗口，与已经在docker中的container交互：
docker exec -it d0ec57f38348 npm run test

测试第二个方式

创建一个服务器，单独用于测试
修改docker-compose.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
version: '3'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - /app/node_modules
      - .:/app
  tests:
    build:
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - /app/node_modules
      - .:/app
    command: ["npm","run","test"]

生产环境

生产环境运行nginx服务器，将build文件夹下的所有文件都复制到nginx中
Dockerfile

1
2
3
4
5
6
7
8
9
10
FROM node:alpine as builder
WORKDIR '/app'
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx      
EXPOSE 80
COPY --from=builder /app/build /usr/share/nginx/html

运行nginx

go build .
go run -p 8080:80 7912f8a3f73e

部署到github

1
2
3
4
5
6
git init
git add README.md
git add .
git commit -m "first commit"
git remote add origin https://github.com/dreamerjackson/docker-react-aws.git
git push -u origin master

.travis.yml

Travis CI

1
2
3
4
5
6
7
8
9
sudo: required
services:
- docker

before_install:
- docker build -t stephengrider/docker-react -f Dockerfile.dev .

script:
- docker run stephengrider/docker-react npm run test -- --coverage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
sudo: required
services:
  - docker

before_install:
  - docker build -t stephengrider/docker-react -f Dockerfile.dev .

script:
  - docker run stephengrider/docker-react npm run test -- --coverage

deploy:
  provider: elasticbeanstalk
  region: "us-east-2"
  app: "docker-react-aws"
  env: "DockerReactAws-env"
  bucket_name: "elasticbeanstalk-us-east-2-943387109564"
  bucket_path: "docker-react-aws"
  on:
    branch: master
  access_key_id: $AWS_ACCESS_KEY
  secret_access_key:
    secure: "$AWS_SECRET_KEY"

郑建勋（jonson）Gopher & 区块链工程师

灾难总是接踵而至，这正是世间的常理。你以为只要哭诉一下，就会有谁来救你？如果失败了，就只能说明我不过是如此程度的男人