preface

There has always been a question plaguing me before: What is the relationship between Docker containerization, which everyone is blowing, and the front end?

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

Application deployment from slash-and-burn, toDevOpsRise, originally more than the front in rapid development. Next, I will use the time of a song, bring you a real experienceDockerThe container.

1. SimpleDockerfile

Prepare a Web application with standard execution instructions, using scaffolding such as creat-React-app or Vue CLI.

Dockerfile does not include other dependencies, try to do all can understand:

# specify Node version FROM Node :12.18.3 # specify the application path in the container. COPY./package.json/Web /package.json # Install dependency RUN yarn # / Web / # EXPOSE the container internal access port, vary according to project EXPOSE 8080 ## if Vue CLi, change to yarn serve CMD [" NPM ", "start"]Copy the code

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

You also need to add a.dockerignore file to speed up the build process

node_modules/**/*
build/**/*
.DS_Store
Copy the code

2. Build for applicationsDockerThe mirror

Confirm yours firstDcokerRunning.

Run the following command to build the Docker image. React-docker can be replaced with whatever value you want to name the image.

docker build -t react-docker .

Copy the code

-t indicates labeling. After the command is executed, the following information is displayed:

Successfully built 137c69857dd0
Successfully tagged react-docker:latest
Copy the code

Your mirror image is ready to go.

3. RunDocker + React/Vue App

Now, use the following Docker run command to run the React application on port 3000 via Docker.

docker run -p 3000:3000 react-docker
Copy the code

Where: the former 3000 corresponds to the host http://localhost:3000/, and the second 3000 is the Docker container port.

Can be achieved byDcoker psViewing Container Information

inDockertheDashboardCan also be seen in:

At this point, open http://localhost:3000/ and you will see a familiar and friendly screen

At this point, your song’s Docker tour of time is over. The next step will be a more standardized procedure, persuasion persuasion!

Use 4.Docker ComposeStandardized process

Add the docker-comemess. yml file to the project root directory:

Version: '3.7' services: sample: container_name: sample build: context:. Dockerfile: dockerfile volumes: - '.:/app' - '/app/node_modules' ports: - 3000:3000 environment: - CHOKIDAR_USEPOLLING=trueCopy the code

With this file, there is no need to execute step by step, just:

docker-compose up -d --build
Copy the code

You can see the same build:

5. In the production environmentDockerfile

If the nginx configuration is required in the production environment, create nginx.config in the root directory

server { listen ${PORT:-80}; server_name _; root /usr/share/nginx/html; index index.html; location / { try_files $$uri /index.html; }}Copy the code

Let’s create a separate Dockerfile for production called dockerfile.prod:

FROM node:12.18.3 AS Builder WORKDIR /app ENV PATH /app/node_modules/. Bin :$PATH COPY package. Json Package - lock. Json. / # front-end project build commands - NPM ci or NPM install # http://www.gaoxiukun.com/wp/archives/509 RUN NPM ci # React Install [email protected] -g COPY.. / RUN NPM RUN build # Install 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/htmlCopy the code

Because dockerfile.prod is not the default executable file, it needs to be built and marked:

docker build -f Dockerfile.prod -t sample:prod .
Copy the code

Next, execute docker run

docker run -it --rm -p 3000:80 sample:prod
Copy the code
  • -i: Run the container in interactive mode.
  • -t: Reassigns a pseudo-input terminal to the container, usually with-iUse simultaneously.
  • --rm: Automatically clears the file system inside the container when the container exits
  • -p: Specifies a port.

Successful operation:

Navigate to http://localhost:3000 in your browser to view the application.

Docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose: docker-compose

Version: '3.7' services: sample-prod: container_name: sample-prod build: context:. Dockerfile: dockerfile. Prod ports: ? '80 -' 3000.Copy the code

Start container:

docker-compose -f docker-compose.prod.yml up -d --build
Copy the code

Check again in the browser.

❤ ️ epilogue

In the past, I only understood the concept of Docker containerization. And the real practice, is also a group of instructions, configuration to scare back.

In this paper, the command line parameters are weakened, hoping that the majority of new students can first understand, then go to practice, and by analogy, no longer afraid of Docker, and then to learn k8S related.

DockerIn the next few years, it will gradually become the standard of development. I hope you can put aside your prejudice against the operation field and learn more about these new standards and concepts in the industry.

If you find this article inspiring, I’d like to invite you to do me three small favors:

  1. Like, so that more people can see this content (collection does not like, is a rogue -_-)
  2. Pay attention to “front-end persuaders” and share original knowledge from time to time.
  3. Look at other articles as well

You can also get all the posts from my GitHub blog:

Front-end persuasion guide: github.com/roger-hiro/… Let’s play. ~