Want to be a front-end star? Docker the react / Vue application in one song time

Time:2021-10-17

preface

There was always a question that bothered me: everyone was blowingDockerWhat is the relationship between containerization and the front end?

However, in the past two years of programming career, in each product iteration, I gradually realized the charm of containerization.

Application deployment from slash and burn toDevOpsThe rise is not only the rapid development of the front end. Next, I will use a song to give you a real experienceDockerContainerization.
Want to be a front-end star? Docker the react / Vue application in one song time

1. SimpleDockerfile

First, prepare a system with standard operation instructionsWebApplication, scaffoldcreat-react-apporVue CLIAnd so on.

BelowDockerfileDo not involve other dependencies, and strive to be able to understand:

#Specify node version
FROM node:12.18.3

#The path to the application in the container. Use web directory as working directory
WORKDIR /web

#Copy package.json to docker environment
COPY ./package.json /web/package.json

#Installation dependency
RUN yarn

#Copy the code to the web directory in the docker container 
COPY . /web/

#Expose the internal access port of the container and change according to the project
EXPOSE 8080

##If it is Vue cli, replace it with yarn serve
CMD ["npm", "start"]

Yes, the development environment isDockerDeployment, the key configuration is just a few lines.

Want to be a front-end star? Docker the react / Vue application in one song time

In addition, you need to add one.dockerignoreFiles to speed up the build process

node_modules/**/*
build/**/*
.DS_Store

2. Build for applicationDockerimage

First confirm yourDcokerRunning.
Want to be a front-end star? Docker the react / Vue application in one song time

Run the following command to buildDockerImage.react-dockerYou can replace it with any value you want to name the image.

docker build -t react-docker .

among-tFor the meaning of labeling, you will see:

Want to be a front-end star? Docker the react / Vue application in one song time

Successfully built 137c69857dd0
Successfully tagged react-docker:latest

Your image is ready to go.

3. OperationDocker + React/Vue App

Now, use the followingdocker runCommand, byDockerOn port3000Run onReactApplication.

docker run -p 3000:3000 react-docker

Where: the previous 3000 corresponds to this machinehttp://localhost:3000/, the second 3000 isDockerContainer port.

Want to be a front-end star? Docker the react / Vue application in one song time

Can passDcoker psView container information
Want to be a front-end star? Docker the react / Vue application in one song time

stayDockerofDashboardYou can also see:

Want to be a front-end star? Docker the react / Vue application in one song time

Open at this timehttp://localhost:3000/You will see a familiar and friendly picture

Want to be a front-end star? Docker the react / Vue application in one song time

Here is the time for your songDockerThe trip is over. The next step will be a more standardized process, persuasion!

4. UseDocker ComposeStandardized process

takedocker-compose.ymlAdd file to project root:

version: '3.7'

services:

  sample:
    container_name: sample
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/app'
      - '/app/node_modules'
    ports:
      - 3000:3000
    environment:
      - CHOKIDAR_USEPOLLING=true

With this file, you don’t need to execute step by step. You can directly:

docker-compose up -d --build

Want to be a front-end star? Docker the react / Vue application in one song time

You can see the same construction:

Want to be a front-end star? Docker the react / Vue application in one song time

5. In production environmentDockerfile

Required in production environmentnginxConfiguration, created in the root directory firstnginx.config

server {
    listen       ${PORT:-80};
    server_name  _;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $$uri /index.html;
    }
}

Let’s create a separateDockerfileFor production environments, calledDockerfile.prod

FROM node:12.18.3 AS builder

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./

#Front end project build command - NPM CI or NPM install 
# http://www.gaoxiukun.com/wp/archives/509

RUN npm ci
#React script is required for react applications
RUN npm install [email protected] -g

COPY . ./
RUN npm run build

#Installing nginx
FROM nginx:1.17-alpine
RUN apk --no-cache add curl
RUN curl -L https://github.com/a8m/envsubst/releases/download/v1.1.0/envsubst-`uname -s`-`uname -m` -o envsubst && \
    chmod +x envsubst && \
    mv envsubst /usr/local/bin
COPY ./nginx.config /etc/nginx/nginx.template
CMD ["/bin/sh", "-c", "envsubst < /etc/nginx/nginx.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]

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

becauseDockerfile.prodIt is not the default executable, so you need to build and mark:

docker build -f Dockerfile.prod -t sample:prod .

Want to be a front-end star? Docker the react / Vue application in one song time

Next executiondocker run

docker run -it --rm -p 3000:80 sample:prod
  • -i: runs the container in interactive mode.
  • -tReassign a pseudo input terminal to the container, usually with:-iUse at the same time.
  • --rm: automatically clean up the file system inside the container when the container exits. If you don’t understand it, you can ignore it
  • -p: Specifies the port.

Successfully run:
Want to be a front-end star? Docker the react / Vue application in one song time

Navigate to in the browserhttp://localhost:3000To view the application.

Next, use the newDocker ComposeDocuments anddocker-compose.prod.ymlTest:

version: '3.7'

services:
  sample-prod:
    container_name: sample-prod
    build:
      context: .
      dockerfile: Dockerfile.prod
    ports:
      - '3000:80'

Start container:

docker-compose -f docker-compose.prod.yml up -d --build

Verify again in the browser.

Want to be a front-end star? Docker the react / Vue application in one song time

❤️ epilogue

In the past, I was rightDockerThe concept of containerization only stays in understanding. In real practice, they are also frightened and discouraged by a group of instructions and configurations.

This paper weakens the command line parameters, hoping that the majority of sprouting newcomers can understand them first, then go to practice, draw inferences from one instance, and don’t be afraidDockerAnd then studyk8srelevant.

Want to be a front-end star? Docker the react / Vue application in one song time

DockerIn the next few years, it will gradually become the standard configuration of development. I hope you can put down your prejudice in the field of operation and maintenance and learn more new standards and concepts in these industries.

If you think this article is very enlightening to you, I’d like to invite you to help me with three small things:

  1. Praise so that more people can see this content (if you don’t like it, you are playing hooligans -#-)
  2. Pay attention to the official account of “front-line retreat” and share original knowledge without any time.
  3. Also look at other articles

You can also come to mineGitHubGet the source files of all articles in the blog:

Front end persuasion Guidehttps://github.com/roger-hiro…
Play together~

Recommended Today

SQL exercise 20 – Modeling & Reporting

This blog is used to review and sort out the common topic modeling architecture, analysis oriented architecture and integration topic reports in data warehouse. I have uploaded these reports to GitHub. If you are interested, you can have a lookAddress:https://github.com/nino-laiqiu/TiTanI recorded a relatively complete development process in my hexo blog deployed on GitHub. You can […]