current position:Home>Introduction to docker: deployment of Vue and visual interface, with ngxin configuration attached
Introduction to docker: deployment of Vue and visual interface, with ngxin configuration attached
2021-08-27 10:27:26 【Little yellow chicken 1992】
This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details :8 Yuegengwen challenge
For small partners in back-end development , You can only understand the publishing of background services , But if you build a personal project or do private work . Front office deployment is also an inseparable topic . This article describes how to publish vue Previous item .
The landlord here mainly depends on nginx Release vue.
1. Install release vue
A cliche , First you need to use docker install nginx.
1. Look at the mirror image
docker search nginx
Copy code
2. Pull the mirror image
docker pull nginx
Copy code
3. Look at the mirror image
docker images
Copy code
4.vue pack
here , We need to vue pack , You need to execute the packaging command , If there are no special modifications, please execute :
npm run build
Copy code
5. preparation
1. New folder
Separately build
- /usr/local/nginx/system: Front desk bag storage location
- /usr/local/nginx/conf: The location of the configuration file
- /usr/local/nginx/log: Log file storage location
2. mount vue package
newly build /usr/local/nginx/system Folder ( Mount as host to docker The folder of the container ), stay vue Get... From the packaged file dist file , And put the folder in /usr/local/nginx/system in .
3. mount nginx To configure
take nginx.conf Copied to the /usr/local/nginx/conf in , Attached below nginx To configure .
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
# Specify the log path
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location ^~/system { # When the access path is ip/system when Will visit /usr/share/nginx/system/dist Under the static file Then the static file will call the interface ajax complete
alias /usr/share/nginx/system/dist; # Appoint dist File storage path
index index.html;
try_files $uri $uri/ /system/index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
Copy code
5. Running the mirror
docker run --name nginx -d -p 80:80 --net=host -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /usr/local/nginx/log:/var/log/nginx -v /usr/local/nginx/system:/usr/share/nginx/system nginx
Copy code
Parameters on :(ps The folder of the host needs to be created ) docker run --name nginx: Container name
- -d -p 80:80 Put in the container 80 port , Specifies the to the host 80 port .
- --net=host: With host Mode start
- -v /usr/local/nginx/conf/nginx.conf:/etc/nginx/nginx.conf : The host machine /usr/local/nginx/conf/nginx.conf File mapped to container /etc/nginx/nginx.conf, In fact, it is based on /usr/local/nginx/conf/nginx.conf Start for profile .
- -v /usr/local/nginx/log:/var/log/nginx: The host machine /usr/local/nginx/log Mapped to container /var/log/nginx Deposit log journal , And nginx Use it with .
- -v /usr/local/nginx/system:/usr/share/nginx/system : The host machine /usr/local/nginx/system Folders and containers /usr/share/nginx/system mapping , take vue Of dist File put in /usr/local/nginx/system, In the container nginx.conf Specify the directory to jump to /usr/share/nginx/system.
- nginx Image name
The above mapping process is , When it starts /usr/local/nginx/conf/nginx.conf It will be copied to /etc/nginx/nginx.conf in , Empathy docker Under the container log The file will also be mapped to /usr/local/nginx/log,/usr/share/nginx/system Will map to docker Container of /usr/share/nginx/system in .
2. summary
nginx Release vue The principle is when you are web Browser input xxxx/system when ( Paths can be configured in a variety of ways ),nginx Will listen web Of 80 port . If the path is configured with interception , Then, you will get... From the configuration file path ( Configuration above alias /usr/share/nginx/system/dist). So you can get vue The foreground static file of .
At the same time, if it is configured as above, it will also be configured in a global way , Configure single sign on .
copyright notice
author[Little yellow chicken 1992],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827102720779o.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich