Cara menggunakan kontena docker untuk menggunakan aplikasi dalam Vue

Docker telah menjadi penyelesaian yang sangat popular dalam pembangunan dan penggunaan aplikasi web moden. Idea asas teknologi Docker adalah untuk mengintegrasikan aplikasi, perkhidmatan dan pelbagai kebergantungan lain bersama-sama melalui penggunaan teknologi kontena. Ini akan menjadikan aplikasi lebih mudah untuk digunakan, diuji dan diselenggara dalam berbilang persekitaran. Pada masa yang sama, untuk pembangun aplikasi Vue.js, teknologi Docker juga menyediakan penyelesaian penggunaan kontena yang mudah, yang boleh membantu menggunakan dan menyelenggara aplikasi dengan cepat.

Artikel ini akan memperkenalkan cara menyimpan dan menggunakan aplikasi Vue.js ke dalam Docker dan berkongsi beberapa petua dan amalan terbaik yang berguna.

Konsep Asas

Sebelum kami mula memperkenalkan penggunaan kontena Docker bagi aplikasi Vue.js, kami perlu memahami beberapa konsep asas terlebih dahulu.

1. Docker: Teknologi kontena sumber terbuka yang menggunakan bekas untuk membungkus, menggunakan dan mengedarkan aplikasi.
2. Bekas: Persekitaran berjalan aplikasi ringan dan bebas yang boleh mengandungi aplikasi, perkhidmatan, persekitaran masa jalan, kebergantungan, dsb.
3. Imej: Persekitaran bekas prakonfigurasi yang merangkumi sistem pengendalian, aplikasi, perkhidmatan, perpustakaan dan semua kebergantungan.
4. Gudang: tempat imej Docker disimpan, termasuk gudang persendirian dan gudang awam.

Pengentena Docker untuk menggunakan aplikasi Vue.js

Di bawah, kami akan memperkenalkan secara terperinci cara menggunakan kontena Docker untuk menggunakan aplikasi Vue.js.

1. Cipta aplikasi Vue.js

Pertama, kita perlu mencipta aplikasi Vue.js. Jika anda sudah mempunyai aplikasi Vue.js, langkau langkah ini.

Vue.js ialah rangka kerja JavaScript yang ringan dan cekap Menggunakan Vue.js, anda boleh membina antara muka pengguna yang interaktif dan responsif dengan mudah. Anda boleh mencipta aplikasi Vue.js baharu menggunakan Vue CLI dengan arahan berikut.

$ vue create my-app

2. Cipta Fail Docker

Fail Docker ialah fail teks yang mengandungi arahan tentang cara membina imej dalam Docker. Berikut ialah contoh asas Dockerfile untuk membina imej aplikasi Vue.js.

# 基于官方的 Node.js 镜像
FROM node:14.17.0-alpine

# 设定工作目录
WORKDIR /app

# 复制package.json和package-lock.json
COPY package*.json ./

# 安装依赖
RUN npm install

# 将其他文件都拷贝到/app文件夹内
COPY . .

# 编译打包
RUN npm run build

# 启动Nginx
FROM nginx

# 复制/dist文件夹到Nginx的默认文件夹
COPY --from=0 /app/dist /usr/share/nginx/html

3. Bina imej aplikasi Vue.js

Gunakan arahan berikut untuk membina imej aplikasi Vue.js:

$ docker build -t my-app .

4 >

Laksanakan bekas aplikasi Vue.js menggunakan arahan berikut:

$ docker run -p 8080:80 my-app

Di mana, -p 8080:80 bermaksud memetakan port 80 dalam bekas ke port 8080 hos.

Kini anda boleh melihat aplikasi Vue.js anda dengan melawati http://localhost:8080 dalam penyemak imbas anda.

5. Gunakan Docker Compose untuk menggunakan

Jika aplikasi Vue.js anda bergantung pada perkhidmatan atau pangkalan data lain, anda boleh menggunakan Docker Compose untuk mentakrif dan menjalankan berbilang bekas sekaligus.

Berikut ialah contoh fail docker-compose.yml mudah yang mentakrifkan aplikasi Vue.js dan bekas pangkalan data MySQL. Menggunakan arahan docker-compose up akan memulakan perkhidmatan.

version: '3.1'

services:
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: example

  frontend:
    build: .
    ports:
      - "8080:80"

Amalan Terbaik

Selain langkah di atas, berikut ialah beberapa amalan terbaik yang perlu anda perhatikan semasa menggunakan aplikasi Vue.js menggunakan kontena Docker.

Gunakan versi alpine imej: Alpine Linux ialah pengedaran Linux ringan yang sangat sesuai untuk dijalankan dalam persekitaran kontena. Menggunakan versi alpine imej Node.js boleh mengurangkan saiz imej.
1. Urus saiz bekas: elakkan menggunakan imej terlalu besar dan urus volum dan cache yang dikongsi dalam bekas.
2. Pastikan pengasingan aplikasi daripada bekas: kecualikan fail modul Nod dan fail lain yang tidak diperlukan daripada bekas, dan gunakan fail .env atau fail konfigurasi untuk mengasingkan maklumat sulit.
3. Fahami keselamatan Docker: Ketahui isu keselamatan dan amalan terbaik Docker, seperti mengurangkan penggunaan pengguna root dan mengelakkan pendedahan port rangkaian yang berlebihan.

Ringkasan

Teknologi Docker boleh menjadikan penggunaan aplikasi Vue.js lebih mudah dan lebih cekap. Dengan menyatukan aplikasi, perkhidmatan dan kebergantungan ke dalam satu bekas, kami boleh mengedarkan aplikasi dengan mudah dan cepat serta meningkatkan kecekapan penggunaan dan penyelenggaraan. Semoga petua dan amalan terbaik yang disediakan dalam artikel ini akan membantu anda menggunakan aplikasi Vue.js anda dengan lebih baik menggunakan kontena Docker.

Atas ialah kandungan terperinci Cara menggunakan kontena docker untuk menggunakan aplikasi dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!