The first sentence of the text of the article: “This is the first day I participated in the More Wen Challenge.

Deploying front-end projects

  1. Start by writing the front end project on your computer and then run NPM Run Build to generate a dist folder.

  2. Containerization consists of three phases, including writing code, which we have done. Build images and create and run containers.

  3. Docker image construction is mainly automatically created, we can create a Dockerfile file in the root directory of my project, the content is to build the image of a command

    # mirror the nginx based image and build the FROM nginx # the project under the dist folder under the root directory of all the files are copied to the mirror in the/usr/share/nginx/HTML/COPY dist/directory/usr/myDocker/client/HTML / # will nginx directory. The default conf copied to/etc/nginx/conf. D/default. The conf # replace with local configuration nginx default configurations in the mirror COPY nginx/default. Conf The/etc/nginx/conf. D/default. The conf # Dockerfile is a text file, used to build the mirror content contains lines build a mirror image of the instructionsCopy the code

  4. We need to write our own nginx configuration file to replace the default configuration in the nginx server when building the image

    Server {#nginx listen 80; Server_name 82.156.197.106; #charset koi8-r; # define this virtual host access log access_log/var/log/nginx/host access. Log the main; error_log /var/log/nginx/error.log error; # the location of "/" start the reverse agent / {# defines a page pointing to the/usr/myDocker/client/index. The HTML # so this means the index after packaging. The HTML and related static resources into a virtual host/usr/share/nginx/HTML root/usr/myDocker/client/HTML; index index.html index.htm; try_files $uri $uri/ /index.html; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }}Copy the code

  5. After these two files are written, we need to send the dist folder, dockerfile and nginx.conf files to a folder in the cloud server through Xftp. This folder can only contain these three files, assuming we call it client.

  6. The other option is to install git, Node, etc on CentOS, pull the project down from Github, and then NPM install and NPM run build. In this case, note that you need to add a.dockerignore file without packing node_moundle

  7. With everything in place, we can build our own image. Docker build -t vue-client-image. Docker build -t vue-client-image. Note that this is a must. So we’ve built a mirror image. At this point we can use Docker Images to view the image we created.

  8. Docker run -p 8080:80 –name client -d vue-client-image-p to map port 8080 of our server to port 80 of nginx Because we set 80 in nginx.conf. This allows us to access our project from our own computer using IP address :8080. Note that we must open port 8080 on the server. -d means to run the container in the background

  9. Docker PS can view all containers running in the background. Docker stop container ID closes the running container. Docker rm delete container id. Docker PS-A can view all containers. Docker RMI Image ID Delete the image.

Docker uses MySQL

  1. MySQL is used as a local database. The first step is to create a container using the MySQL imageDocker run -p 3306:3306 --name vue-mysql -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7Port mapping uses port 3306 of the server to map to port 3306 of the mysql. -e is the configuration information. Here we can configure the password of the mysql service. So we have our container.
  2. docker exec -it vue-mysql bashExecute the command to access the mysql service we created. Note that we also need to log in to our mysql server with a password. Command ismysql -uroot -p123456. Log in and we’ll do what we normally do.
  3. We tried to connect to the mysql service on our server using Navicat. As usual, localhost is our domain name.

Afterword.

For a full stack project, we’re missing the back-end code, so I’ll write another back-end project after I learn nest.js, and then share the code. Remember to pay attention.