Geekly articles weekly

Menyebarkan aplikasi web isomorfik menggunakan Nuxt.js sebagai contoh.


Dalam proyek menengah dan besar, situs ini tidak terbatas pada satu layanan - misalnya, hanya situs, sebagai aturan ada database, API, server yang merutekan permintaan ke semua layanan ini. Meluncurkan dan memperbarui semua ini tanpa standarisasi apa pun tidak mudah, dan menskalakan ke banyak server bahkan lebih sulit.

Docker, yang telah menjadi standar de facto di dunia pengemasan, pengiriman, dan aplikasi penerbitan, akan membantu kami mengatasi masalah ini.

Docker memungkinkan kita untuk membungkus aplikasi atau layanan dengan semua dependensi dan pengaturan dalam wadah yang terisolasi, menjamin konsistensi konten pada platform apa pun.

Sebagai aplikasi isomorfik, kita akan menggunakan kerangka kerja Nuxt.js, yang terdiri dari Vue.js dan Node.js, memungkinkan kita untuk menulis aplikasi web universal dengan rendering sisi-server (SSR).

Pilihan ini karena preferensi pribadi, namun, dengan cara yang sama, Anda dapat mengambil kerangka kerja lain, misalnya Next.js.

Kami mengumpulkan dan mempublikasikan gambar pertama.


Pertama-tama, Anda perlu mengkonfigurasi port dan host di dalam aplikasi. Ada beberapa cara untuk melakukan ini, kita akan menggunakan pengaturan di package.json dengan menambahkan bagian baru:

"config": { "nuxt": { "host": "0.0.0.0", "port": "3000" } }

Untuk tindakan lebih lanjut, kita membutuhkan buruh pelabuhan, susunan buruh pelabuhan yang terpasang di sistem dan editor dengan proyek terbuka.

Buat Dockerfile yang kami masukkan ke root dan jelaskan instruksi untuk membangun gambar.

Kita perlu membangun gambar berdasarkan gambar Node.js versi 10, dalam hal ini versi alpine yang ringan digunakan:

 FROM node:10-alpine

Kemudian atur variabel lingkungan dengan nama direktori:

 ENV APP_ROOT /web

Tetapkan sebagai direktori kerja dan tambahkan sumber:

 WORKDIR ${APP_ROOT} ADD . ${APP_ROOT}

Instal dependensi dan bangun aplikasi:

 RUN npm ci RUN npm run build

Dan kami menulis perintah peluncuran aplikasi di dalam gambar:

 CMD ["npm", "run", "start"]

Dockerfile
 FROM node:10-alpine ENV APP_ROOT /web ENV NODE_ENV production WORKDIR ${APP_ROOT} ADD . ${APP_ROOT} RUN npm ci RUN npm run build CMD ["npm", "run", "start"]


Setelah itu, buka folder saat ini di terminal dan kumpulkan gambar:

 docker build -t registry.gitlab.com/vik_kod/nuxtjs_docker_example .

Jalankan gambar secara lokal untuk memverifikasi bahwa semuanya berfungsi dengan benar:

 docker run -p 3000:3000 registry.gitlab.com/vik_kod/nuxtjs_docker_example

Pergi ke localhost: 3000, kita akan melihat yang berikut:



Hebat! Kami berhasil meluncurkan bangunan produksi aplikasi pada mesin lokal.

Sekarang kita perlu menerbitkan gambar ke repositori buruh pelabuhan agar dapat menggunakan gambar yang sudah jadi pada server target. Anda dapat menggunakan repositori yang di-host-sendiri atau yang lain, misalnya, hub.docker.com resmi.

Saya akan menggunakan repositori di gitlab, tab dengan repositori buruh pelabuhan ada yang disebut registry. Sebelumnya, saya sudah membuat repositori untuk proyek, jadi sekarang saya menjalankan perintah:

 docker push registry.gitlab.com/vik_kod/nuxtjs_docker_example

Setelah gambar berhasil di-boot, Anda dapat mulai mengkonfigurasi server VPS,
Milik saya adalah sebagai berikut:

  • RAM 1 GB
  • 4 core
  • 30 GB drive

Saya juga mengambil kesempatan untuk menginstal buruh pelabuhan segera ketika membuat server, jadi jika itu tidak diinstal pada VPS Anda, Anda dapat membaca instruksi di situs web resmi.

Setelah membuat server, buka dan masuk ke repositori buruh pelabuhan, dalam kasus saya ini gitlab:

 docker login registry.gitlab.com

Setelah otorisasi, kita dapat memulai aplikasi dengan perintah yang terlihat sebelumnya:

 docker run -p 3000:3000 registry.gitlab.com/vik_kod/nuxtjs_docker_example



Gambar telah diunduh dan mulai, mari kita periksa:



Kami melihat gambar yang akrab, kami meluncurkan wadah dengan aplikasi, tetapi sudah di server jauh.

Sentuhan terakhir tetap, sekarang ketika terminal ditutup, gambar akan dihentikan, jadi kita akan menambahkan atribut -d untuk memulai wadah di latar belakang.
Berhenti dan mulai ulang:

 docker run -d -p 3000:3000 registry.gitlab.com/vik_kod/nuxtjs_docker_example

Sekarang kita dapat menutup terminal dan memastikan aplikasi kita berfungsi dengan sukses.

Kami mencapai apa yang dibutuhkan - kami meluncurkan aplikasi di buruh pelabuhan dan sekarang aplikasi ini cocok untuk ditempatkan, baik sebagai gambar independen dan sebagai bagian dari infrastruktur yang lebih besar.

Tambahkan reverse proxy


Pada tahap saat ini, kita dapat menerbitkan proyek sederhana, tetapi bagaimana jika kita perlu meletakkan aplikasi dan API di domain yang sama dan selain itu, berikan statika tidak melalui Node.js?

Dengan demikian, perlu muncul apa yang disebut server proxy terbalik, di mana semua permintaan akan diterima dan dialihkan tergantung pada permintaan ke layanan terkait.

Dengan demikian server kita akan menggunakan nginx.

Mengelola wadah jika ada lebih dari satu secara individu tidak nyaman. Oleh karena itu, kami akan menggunakan buruh pelabuhan sebagai cara untuk mengatur dan mengelola wadah.

Buat proyek kosong baru, di root yang kami tambahkan file docker-compose.yml dan folder nginx.

Di docker-compose.yml kami menulis yang berikut ini:

 version: "3.3" #      services: #  , nginx nginx: image: nginx:latest #   80  http  443  https ports: - "80:80" - "443:443" #      container_name: proxy_nginx volumes: #   nginx ,      - ./nginx:/etc/nginx/conf.d #            - ./logs:/var/log/nginx/ #   Nuxt.js  nuxt: #     image: registry.gitlab.com/vik_kod/nuxtjs_docker_example container_name: nuxt_app #        ports: - "3000:3000"

Di folder nginx, tambahkan config, yang direkomendasikan oleh situs resmi Nuxt.js , dengan sedikit perubahan.

nginx.conf
 map $sent_http_content_type $expires { "text/html" epoch; "text/html; charset=utf-8" epoch; default off; } server { root /var/www; listen 80; #    nginx server_name localhost; #   ip  gzip on; gzip_types text/plain application/xml text/css application/javascript; gzip_min_length 1000; location / { expires $expires; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_read_timeout 1m; proxy_connect_timeout 1m; #   ,       # docker-compose        ,    nuxt_app proxy_pass http://nuxt_app:3000; } }


Kami menjalankan perintah untuk menjalankan:

 docker-compose up



Semuanya dimulai dengan benar, sekarang jika kita pergi ke alamat yang mendengarkan nginx, localhost - kita akan melihat aplikasi kita, tidak akan ada perbedaan visual, namun sekarang semua permintaan pergi ke nginx terlebih dahulu di mana mereka dialihkan tergantung pada aturan yang ditentukan.

Sekarang kita tidak memiliki layanan atau statika tambahan, mari kita tambahkan folder statis di mana kita akan menempatkan beberapa gambar.

Pasang di wadah nginx dengan menambahkan baris ke docker-compose:

 ... container_name: proxy_nginx volumes: #     - ./static:/var/www/static ...

Updated docker-compose.yml
 version: "3.3" #      services: #  , nginx nginx: image: nginx:latest #   80  http  443  https ports: - "80:80" - "443:443" #      container_name: proxy_nginx volumes: #   nginx ,      - ./nginx:/etc/nginx/conf.d #            - ./logs:/var/log/nginx/ #     - ./static:/var/www/static #   Nuxt.js  nuxt: #     image: registry.gitlab.com/vik_kod/nuxtjs_docker_example container_name: nuxt_app #         ports: - "3000:3000"


Kemudian tambahkan lokasi baru ke nginx.conf:

 location /static/ { try_files $uri /var/www/static; }

Diperbarui nginx.conf
 map $sent_http_content_type $expires { "text/html" epoch; "text/html; charset=utf-8" epoch; default off; } server { root /var/www; listen 80; #    nginx server_name localhost; #   ip  gzip on; gzip_types text/plain application/xml text/css application/javascript; gzip_min_length 1000; location / { expires $expires; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_read_timeout 1m; proxy_connect_timeout 1m; #   ,       # docker-compose        ,    nuxt_app proxy_pass http://nuxt_app:3000; } location /static/ { try_files $uri /var/www/static; } }


Mulai ulang komposisi buruh pelabuhan:

 docker-compose up --build

Pergi ke localhost / static / demo.jpg




Sekarang statis dikirimkan melalui Nginx, menghapus beban dari Node.js di aplikasi utama.

Setelah memastikan bahwa semuanya berfungsi, Anda dapat mempublikasikan perakitan kami di server. Untuk melakukan ini, saya akan membuat repositori di direktori saat ini. Setelah sebelumnya menambahkan log dan folder statis ke .gitignore.

Setelah itu, kita pergi ke server, menghentikan gambar buruh pelabuhan yang sebelumnya diluncurkan dan mengkloning repositori.



Sebelum memulai perakitan, Anda perlu memindahkan folder dengan statika ke server, pergi ke terminal di mesin lokal dan gunakan utilitas baris perintah scp untuk memindahkan folder ke server:

 scp -r /Users/vik_kod/PhpstormProjects/nuxtjs_docker_proxy_example/static root@5.101.48.172:/root/example_app/

Jika volume statika besar, lebih baik kompres folder terlebih dahulu dan kirim sebagai arsip, lalu ekstrak di server. Jika tidak, unduhan mungkin memakan waktu lama.

Kami kembali ke terminal di server dan pergi ke folder kloning, jalankan perintah:

 docker-compose up -d

Tutup terminal dan pergi ke situs:




Hebat! Menggunakan reverse proxy, kami memisahkan statika dari aplikasi.

Langkah selanjutnya


Semua yang telah kami lakukan di atas adalah pilihan yang cukup sederhana, dalam proyek-proyek besar Anda perlu mempertimbangkan lebih banyak hal, di bawah ini adalah daftar singkat dari apa yang dapat Anda lakukan selanjutnya.

  • Wadah data hanya untuk area admin statis, aplikasi SPA, dan basis data
  • Layanan tambahan untuk pemrosesan gambar dan optimisasi, misalnya
  • Integrasi CI / CD, perakitan gambar ketika mendorong ke cabang yang dipilih, serta layanan memperbarui dan memulai kembali secara otomatis
  • Buat Kubernetes atau Swarm cluster jika ada lebih dari 1 server, untuk penyeimbangan beban dan penskalaan horizontal yang mudah

Total


  • Kami telah berhasil menerbitkan aplikasi di server dan menyiapkannya untuk penskalaan lebih lanjut.
  • Kami harus mengenal buruh pelabuhan dan mengetahui cara membungkus aplikasi Anda dalam sebuah wadah.
  • Kami belajar langkah apa yang bisa diambil lebih lanjut untuk meningkatkan infrastruktur.

Kode sumber


Aplikasi
Konfigurasi

Terima kasih atas perhatian Anda dan saya harap materi ini membantu Anda!

Source: https://habr.com/ru/post/id438862/

More articles:


All Articles