[VueJS] Hướng dẫn deploy VueJS bằng docker

Bài đăng này đã không được cập nhật trong 3 năm

Bài này mình sẽ hướng dẫn ae deploy 1 vue app kết hợp nginx và docker

Install docker

Trước tiên bạn phải cài docker trước đã.

Link cài đặt ở đây nhé: https://www.docker.com/get-started

Tạo Dockerfile

Ở đây mình lấy ví dụ thư mục chứa project của mình có tên như sau: vue_app

Thì bạn tạo file Dockerfile có đừong dẫn như sau: vue_app/Dockerfile

Với nội dụng:

FROM node:latest as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build

FROM nginx as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf

Tạo .dockerignore file

File .dockerignore dùng để bỏ qua những file hoặc folder không muốn đưa vào image

Ở đây mình sẽ bỏ qua 2 thử mục node_modules và dist không cần thiết để sử dụng trong quá trình deploy

**/node_modules
**/dist

Config nginx

Nginx là một máy chủ HTTP(s) mà mình sẽ sử dụng trong docker container.

Và dứới đây mình tạo 1 file config HTTP đơn giản trên port 80.

Các bạn có thể tham khảo cách cấu hình tại https://www.nginx.com/resources/wiki/start/topics/examples/full/

Tạo file vue_app/nginx.conf với nội dung là:

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}