What I will share with you today is that Docker uses Nginx to deploy Vue and other front-end page projects; in fact, I just use it in my work, so I will share it with you O(∩_∩)O by the way, so let’s start directly without further ado.
One: Prepare documents
Let's package the front-end project first and put it in this folder, for example like me:
Then write the Dockerfile file and nginx.conf.template file, the file content is as follows:
Dockerfile：
FROM nginx:latest
#将配置文件复制到Nginx指定文件夹下
COPY ./dist /dist
COPY ./nginx.conf.template /
#构建自定义环境变量
CMD envsubst < /nginx.conf.template > /etc/nginx/nginx.conf \
&& cat /etc/nginx/nginx.conf \
&& nginx -g 'daemon off;'nginx.conf.template：
user nginx;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
#超时时间
keepalive_timeout 65;
server {
#监听端口
listen 80;
#服务名，可通过此名称访问页面
server_name localhost;
location / {
root /dist;
#设置访问端口首页
index index.html index.htm;
}
#设置报错跳转页面，不需要可注释或删掉
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
Warm reminder: The dist folder on the left side of the Dockerfile is the folder where your front-end project is stored. The nginx.conf.template file has set the home page jump index, etc., remember to change it to what you need when using it; write comments in important positions You can change it to what you need.
Finally, put the three prepared files into the same folder (it is recommended to create a new folder). Note that both Dockerfile and nginx.conf.template have no suffix.
Note: If it is a linux system, first find a location to create a folder, and then use the visualization window to pull all three files into the folder just created. If your tool does not support visual windows, you can go to my article to learn or download any of the tools. I will not write the linux upload command (●'◡'●).
After the preparation is completed, you will get three files like me.
Two: start deployment
1. First of all, first CD into the folder where you store the files. Here I am using Docker desktop of Windows for demonstration.
If you are a linux system, directly cd the folder path, if you have already entered, you don’t need to repeat the operation.
2. Execute the Dockerfile and build the docker image. Note that there must be a point behind it. If the latest version of Nginx is not installed, the process will be a little slower, you can download Nginx in advance, the command is: docker pull nginx
docker build -f Dockerfile2 -t my-frontend:v1.0 .--Dockerfile2: It is the Dockerfile written above, subject to your own
--my-frontend:v1.0: The left is the name of the built image, and v1.0 is the tag label, which can also be understood as the version number
3. Run the container according to the above image
docker run -d --name nginx01 -p 3000:80 my-frontend:v1.0--name: container name
--p: Port number, the left side is the external network access port, and the right side is the internal mapping port, which is the same as the default listening port of nginx.conf.template 80.
--my-frontend:v1.0: image name: tag, if no tag is carried, the default is latest
4. After the execution, you can use docker ps to check whether the container just started successfully
It starts successfully like this:
5. Open browser access
Enter localhost or your ip+port number to access the home page of the front-end project, for example:
This is a very low front-end page written by myself
So far, your project has been successfully deployed to Nginx in Docker, Sahua *★,°*:.☆(￣▽￣)/$:*.°★*.
The above is all the content of this sharing, thank you for reading; if you like this article or this article helped you, please remember to like and bookmark O(∩_∩)O