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
Tabla de contenido
Introducción
El primer proyecto Vue.js de Sylvan Ding. Ayuda a los usuarios a encontrar más información sobre COVID-19 y calmar su pánico.
Características clave
- Perfecciona la documentación
- Reconstruir la interfaz de usuario del elemento
- Especificar estilo y formato de código
- Personalizar el componente de la tarjeta
- Globalizar menos archivo
- Encapsular Axios
- Integrar Express
- Aplicación Dockerize Vue.js
- Consejos innovadores para la entrada de direcciones basados en el componente Autocompletar de Element UI
- Distinguir entre entorno de desarrollo y entorno de producción.
Entorno de desarrollo
nodo | 14.16.1 |
---|---|
npm | 8.18.0 |
ver-cli | 2.9.6 |
vista | 2.5.2 |
construir con
- vista
- ElementoUI
- Estibador
Uso
npm
Utilice el comando npm install
para instalar automáticamente cualquier paquete del que dependa el proyecto.
# check node's version
node -v # v14.16.1
# check npm's version
npm -v # v8.18.0
# install dependencies
npm install --legacy-peer-deps
Estibador
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 Dockerfile
para el entorno 'dev' y 'prod' en la carpeta raíz de nuestro proyecto. Agregue un .dockerignore
para 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.dev
en 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.0
establece la variable de entornoHOST
en el valor0.0.0.0
, lo que sobrescribe la configuración del servidor de desarrollohost
enconfig/index.js
. Si mantiene la configuración originalhost: 'localhost'
, no se podrá acceder a nuestra aplicación Vue.js en un contenedor acoplable desde el exterior. Al inspeccionar el puerto expuesto del contenedordocker container port dockerize-vuejs-app-dev
, obtenemos el resultado8080/tcp -> 0.0.0.0:8080
, lo que significa que el contenedor acoplable está escuchando el puerto interno0.0.0.0:8080
en lugar delocalhost:8080
. Para ser más específicos, cuando las aplicaciones se ejecutan en un contenedor Docker, la IP127.0.0.1
se asigna al contenedor Docker, no al host. Cambiarlo a0.0.0.0
nos permitirá acceder directamente a la aplicación desde el host.
COPY patches ./patches
tiene 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.json
ypackage-lock.json
luego 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}:/app
Monta 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:8080
su 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.dev
para 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://localhost
o http://yourPublibIPAddress
. Tenga en cuenta que necesita abrir el puerto 80 en su firewall. Para ejecutar un contenedor en segundo plano, usamos -d
flag 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 attach
adjunta 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=false
impideCTRL-c
enviar unSIGINT
al contenedor. Le permite desconectarse del contenedor con una-d
bandera y dejarlo ejecutando Nginx continuamente usando laCTRL-c
secuencia de teclas.
Licencia
La licencia MIT (MIT) 2022 - SylvanDing .