[Good article forwarding and sharing] How to use Docker to build front-end projects

It is very convenient for Docker to deploy front-end projects and Node projects separately. Here I will share the use of Docker, mainly talking about its deployment practice. (I installed Docker on Windows 10 Professional Edition)

Forwarded from: How to use Docker to build front-end projects - herryLo - 博客园

Docker

Docker is an application container engine technology, similar to a virtual machine, but it is more practical, versatile, and more convenient. The Docker container can be said to be a VM, but it occupies less resources and is lighter. Using more economical hardware resources to provide users with more computing resources.

A Docker container is a package of a Linux container. Since the container has an independent operating environment, Docker can package applications and dependencies into containers, and start the container to run the program.

Docker deployment

Docker containers are very convenient to use with GitHub Action, Jenkins, and Rancher. Of course, what I’m talking about here is Docker’s personal deployment practice. The following is mainly about the general front-end project deployment solution.

configure nginx

Create nginx.conf (same level as package.json) in the root directory of the front end. The specific configuration is as follows, which can be adjusted and modified according to the actual project:

server {
listen 80 default_server;
server_name _;


location / {
root /usr/share/nginx/html/web;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}


# 接口代理示例
# location /api {
# proxy_pass http://xxx.com;
# proxy_set_header Host $host:$server_port;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_set_header Cookie $http_cookie;
# proxy_buffering off;
# proxy_cache off;
# }
}

The main function of nginx configuration is static resource proxy and interface forwarding. The above configuration is to run directly on the local machine. If you want to run it on the server, you can change the configuration to:

	listen 80;
	server_name xxx.com;

Configure Dockerfile

Create a Dockerfile file in the root directory (same level as package.json)

FROM node:latest
COPY package.json /
RUN npm i --registry=https://registry.npm.taobao.org
RUN npm run build


FROM nginx:latest
# 这里的dist/目录是你的项目打包后的文件目录
COPY ./dist/ /usr/share/nginx/html/
COPY ./nginx.conf /etc/nginx/conf.d/


EXPOSE 80

The above configuration file is very simple, mainly to package the build, then install nginx, copy the nginx configuration file, copy the packaged file, and open port 80.

Docker image deployment

Update the project to the server, and run the Docker build command on the server (of course, it can also be built locally):

Docker build -t docker/web:v1.0 .

docker/web:v1.0 is the image name, pay special attention to the dot on the last page that cannot be omitted.

Start the container

docker run -d -p 8080:80 docker/web:v1.0

docker/web:v1.0 It is the name set when building the mirror image, 8080:80which means to map nginx's 80 to your server's 8080 port (note whether your server's port is open to 8080, and other ports are also available; if you are accessing locally, don't worry about this).

localhost:8080After the image is started successfully, you can access it by typing in the browser .