Documentos de diseño y desarrollo web del sistema de autodetección COVID-19

El primer proyecto de Sylvan Ding basado en Vue.js. La información proporcionada en este proyecto es solo de referencia y no se garantiza la exactitud, validez, puntualidad e integridad de la información. Para obtener más información, consulte la Comisión Nacional de Salud y Salud. ¡sitio web!
Explore los documentos »

Ver demostración · Informar error · Solicitar función

página principal

Ejecución del proyecto Vue.js en Docker (entorno de desarrollo/entorno de producción)

A continuación, ejecutaremos nuestra aplicación Vue.js en un contenedor Docker.

Ambiente

ubuntu	18.04.4
Estibador	20.10.18
Composición acoplable	2.10.2

Instalación

# Install using the convenience script
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh --mirror Aliyun
docker -v # 20.10.18
docker compose version # 2.10.2
# Change registry mirrors
vim /etc/docker/daemon.json
# input the following JSON: {"registry-mirrors": ["https://docker.mirrors.ustc.edu.cn/", "https://registry.docker-cn.com"]}
sudo systemctl daemon-reload
sudo systemctl restart docker
docker info
# Registry Mirrors:
#  https://docker.mirrors.ustc.edu.cn/
#  https://registry.docker-cn.com/
sudo docker run hello-world
# Unable to find image 'hello-world:latest' locally
# latest: Pulling from library/hello-world
# 2db29710123e: Pull complete
# Status: Downloaded newer image for hello-world:latest
# Hello from Docker!
# This message shows that your installation appears to be working correctly.

Cree imágenes y ejecute contenedores de la aplicación Vue.js

Creamos Dockerfilepara el entorno 'dev' y 'prod' en la carpeta raíz de nuestro proyecto. Agregue un .dockerignorepara acelerar el proceso de compilación de Docker, ya que nuestras dependencias locales y el repositorio de git no se enviarán al demonio de Docker.

docs
images
README.md
.prettierrc
node_modules
.git
.gitignore
static/.gitkeep

desarrollador

Comenzamos creando un Dockerfile.deven la carpeta raíz de nuestro proyecto:

# Dockerfile.dev

FROM node:14.16.1

WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# overwrite Dev Server settings `host` in `config/index.js`
ENV HOST 0.0.0.0

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# copy `patches` before npm runs post-install script
COPY patches ./patches

# update npm and install project dependencies
RUN npm i [email protected] -g
RUN npm i vue-cli -g --legacy-peer-deps
RUN npm install --legacy-peer-deps

EXPOSE 8080

# configure anonymous volume in order to 
# use the container version of the “node_modules” folder
VOLUME "/app/node_modules"

CMD ["npm", "run", "dev"]

ENV HOST 0.0.0.0establece la variable de entorno HOSTen el valor 0.0.0.0, lo que sobrescribe la configuración del servidor de desarrollo hosten config/index.js. Si mantiene la configuración original host: 'localhost', no se podrá acceder a nuestra aplicación Vue.js en un contenedor acoplable desde el exterior. Al inspeccionar el puerto expuesto del contenedor docker container port dockerize-vuejs-app-dev, obtenemos el resultado 8080/tcp -> 0.0.0.0:8080, lo que significa que el contenedor acoplable está escuchando el puerto interno 0.0.0.0:8080en lugar de localhost:8080. Para ser más específicos, cuando las aplicaciones se ejecutan en un contenedor Docker, la IP 127.0.0.1se asigna al contenedor Docker, no al host. Cambiarlo a 0.0.0.0nos permitirá acceder directamente a la aplicación desde el host.

COPY patches ./patchestiene como objetivo proporcionar parches antes de que npm ejecute el script posterior a la instalación. Después de aplicar el parche, obtendrá el resultado: Applying patches... [email protected] ✔.

Puede parecer redundante copiar primero package.jsony package-lock.jsonluego todos los archivos y carpetas del proyecto en dos pasos separados, pero en realidad hay una muy buena razón para ello (spoiler: nos permite aprovechar las capas de Docker almacenadas en caché).

Ahora creemos la imagen de Docker de nuestra aplicación Vue.js:

docker build -f Dockerfile.dev -t dockerize-vuejs-app:dev .

Finalmente, ejecutemos nuestra aplicación Vue.js en un contenedor Docker:

docker run -it -p 8080:8080 -v ${
    
    PWD}:/app --rm --name dockerize-vuejs-app-dev dockerize-vuejs-app:dev

-v ${PWD}:/appMonta nuestro código en el contenedor en "/app" para habilitar la " Recarga en caliente ". ${PWD}es /path/to/your/project, que puede no funcionar en Windows. (Consulte esta pregunta de desbordamiento de pila para obtener más información).

Debería poder acceder a nuestra aplicación Vue.js en localhost:8080su máquina host. Los registros son los siguientes:

 DONE  Compiled successfully in 12336ms                                                            3:04:24 AM

 I  Your application is running here: http://0.0.0.0:8080
 I  Your Express app is listening on port 8081

 N  © Sylvan Ding 2022 <[email protected]>
 N  https://github.com/sylvanding/

Pinchar

Para casos de uso de producción realmente complejos, puede ser más inteligente apoyarse en algún gigante como NGINX o Apache y eso es exactamente lo que vamos a hacer a continuación: estamos a punto de aprovechar NGINX para servir nuestra aplicación Vue.js porque se considera una de las soluciones más eficaces y probadas en batalla que existen.

Refactorizamos nuestro Dockerfile.devpara usar NGINX:

# Dockerfile.prod

# build stage
FROM node:14.16.1 as build-stage
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package*.json ./
COPY patches ./patches
RUN npm i [email protected] -g
RUN npm i vue-cli -g --legacy-peer-deps
RUN npm install --legacy-peer-deps
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Ahora creemos la imagen de Docker de nuestra aplicación Vue.js:

docker build -f Dockerfile.prod -t dockerize-vuejs-app:prod .

Finalmente, ejecutemos nuestra aplicación Vue.js en un contenedor Docker:

docker run -it -p 80:80 --rm --name dockerize-vuejs-app-prod dockerize-vuejs-app:prod

Deberíamos poder acceder a nuestra aplicación Vue.js en http://localhosto http://yourPublibIPAddress. Tenga en cuenta que necesita abrir el puerto 80 en su firewall. Para ejecutar un contenedor en segundo plano, usamos -dflag en lugar de --rm:

docker run -d -p 80:80 --name dockerize-vuejs-app-prod dockerize-vuejs-app:prod

Deténgase y retire ese contenedor:

docker rm -f dockerize-vuejs-app-prod

Ver registros de acceso de Nginx

Escriba el siguiente comando nos ayuda a ver los registros de acceso en tiempo real de Nginx que se muestran en la pantalla virtual del contenedor en segundo plano:

docker attach --sig-proxy=false dockerize-vuejs-app-prod

¿Qué pasa allí?

docker attachadjunta la entrada, salida y error estándar de su terminal (o cualquier combinación de los tres) a un contenedor en ejecución utilizando el ID o el nombre del contenedor. Esto le permite ver su salida en curso o controlarla de forma interactiva, como si los comandos se estuvieran ejecutando directamente en su terminal.
--sig-proxy=falseimpide CTRL-cenviar un SIGINTal contenedor. Le permite desconectarse del contenedor con una -dbandera y dejarlo ejecutando Nginx continuamente usando la CTRL-csecuencia de teclas.

Indique la fuente al reimprimir: ©️ Sylvan Ding 2022