Cover source: Circle of Friends – Ah deceive

Found a lot of blogs, finally successful, 🤦 is too difficult.

Make sure you give me a thumbs-up if you succeed. Each step is a practical exercise with diagrams and parsing.

Ali Cloud server Docker deployment SpringBoot project actual combat

A, packaging,

First package the front-end Vue project

Run command:

npm run build
Copy the code

Just wait until it’s packed.

Dockerfile file

Write a Dockerfile file

FROM nginx # Pull nginx image
COPY ./dist/ /usr/share/nginx/html/  # Copy contents from dist directory to /usr/share/nginx/ HTML/directory in the container
COPY nginx.conf /etc/nginx/nginx.conf  # copy the nginx.conf configuration file to the container
Copy the code

Nginx.cong configuration file

#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; client_max_body_size 20m; server { listen 80; Server_name Cloud server IP address; #charset koi8-r; #access_log logs/host.access.log main; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; }}}Copy the code

4. Upload files

Upload the three files to the same folder on the cloud server

Five, packaging as a mirror

Once you’re ready, go to the directory that holds the three files.

Execute Docker’s packaging command.

Docker build-t wyj_newS_vue :1.0.1.# wyj_news_vue:1.0.1 is the name of my image :1.0.1 is the version I follow or latest
# The last decimal point cannot be lost this means the dockerfile file in this directory
Copy the code

If this is the case, the package has been successfully packaged.

If that doesn’t work, check to see if you typed the wrong packing command and added the decimal point at the end.

6. Start the project

Docker starts the image

Docker run --name wyj_news_vue -p 8050:80 -d wyj_news_vue:1.0.1Copy the code

This is the only line on the bottom that proves that it started successfully.

  • –name is the name of the container to start
  • -P makes a port exposure
  • -d Running in the background
  • Wyj_news_vue :1.0.1 is the name of the image I packed earlier

Seven, test,

The open port I have here is 8050

I enter the IP address :8050 in the browser to access my project.

The Intranet test was done by Oak

Then take the external network test is also possible

self-talk

Record the small demo you made, and finally successfully put the back end project online. The back end has been written in another article.

Finally got the front end online this time.

Deploying a project on a cloud server with Docker is really convenient and cool, but in order to be straightforward, the next step is to start learning the footlanguage.

Of course, if you also successfully deploy like this, can you give me a thumbs up?