از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
برنامه های تک صفحه ای با Vue.js و Flask: Deployment به قسمت هفتم و آخر این مجموعه آموزشی چند قسمتی خوش آمدید روی توسعه وب تمام پشته با استفاده از Vue.js و Flask. در این پست روش استقرار اپلیکیشن ساخته شده در این سری را نشان خواهم داد. کد این پست را می توانید پیدا کنید روی حساب GitHub من تحت …
سرفصلهای مطلب
استقرار در یک سرور خصوصی مجازی
به قسمت هفتم و آخر این مجموعه آموزشی چند قسمتی خوش آمدید روی توسعه وب تمام پشته با استفاده از Vue.js و Flask. در این پست روش استقرار اپلیکیشن ساخته شده در این سری را نشان خواهم داد.
کد این پست را می توانید پیدا کنید روی حساب GitHub من در زیر شاخه پست هفتم.
محتوای سری
- راه اندازی و آشنایی با VueJS
- مسیریاب Vue
- مدیریت دولتی با Vuex
- RESTful API با Flask
- ادغام AJAX با REST API
- احراز هویت JWT
- استقرار در یک سرور خصوصی مجازی (تو اینجایی)
مروری بر فناوری ها
این آموزش چندین فناوری لازم برای استقرار یک Flask REST API چند لایه توزیع شده و برنامه Vue.js SPA را پوشش خواهد داد. در زیر من فناوری ها و کاربرد آنها را لیست کرده ام:
- اوبونتو LTS 16.04: host سرور برای اجرای برنامه ها و سرورهای مختلف
- uWSGI: رابط دروازه وب سرور (WSGI) container سرور برای اجرای برنامه های پایتون (در این مورد فلاسک)
- Nginx: وب سرور HTTP غیر مسدود کننده با عملکرد بالا که قادر به پروکسی معکوس به uWSGI است.
- Node.js / NPM: محیط جاوا اسکریپت برای ساخت برنامه Vue.js SPA
آماده شدن کد برای استقرار
چند تغییر وجود دارد که باید در کد ایجاد شود تا پس از استقرار برنامه در محیط تولید من، قابل نگهداری تر شود.
به عنوان مثال، در api/index.js از survey-spa برنامه Vue.js من متغیری را کدگذاری کرده ام به نام API_URL برای اشاره به سرور توسعه دهنده http://127.0.0.1:5000/api. با انجام این کار، باید به خاطر داشته باشم که هر بار که نیاز به استقرار دارم، این آدرس IP سرور تولید را تغییر دهم.
تجربه به من آموخته است که همیشه تغییراتی در برنامه وجود خواهد داشت که مستلزم استقرار در آینده است، جایی که احتمالا فراموش می کنم این آدرس IP را به روز کنم. یک روش بهتر این است که خطر فراموشی به‌روزرسانی این مورد را از بین ببرم و در عوض از تنظیمات در ساخت استفاده کنم. process برای انجام این کار برای من و در نتیجه کمتر چیزی را که باید به خاطر بسپارم (یعنی مراحل کمتری نیاز است) در طول استقرار داشته باشم. این به طور قابل توجهی خطر استقرار ناموفق را کاهش می دهد روی به روز رسانی های آینده
من این کار را با انتقال به دایرکتوری survey-spa/config و اصلاح آن انجام می دهم dev.env.js و prod.env.js فایل ها با تعریف متغیری به نام API_URL که به آنها مقداری از http://localhost:5000/api برای توسعه دهنده و http://${process.env.BASE_URL}/api برای پرود مطابق شکل زیر:
// dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_URL: JSON.stringify(`http://localhost:5000/api`)
})
// prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_URL: JSON.stringify(`http://${process.env.BASE_URL}/api`)
}
توجه داشته باشید: ارزش process.env.BASE_URL یک متغیر محیطی است که من به کاربر سرور اوبونتو اضافه خواهم کرد .bash\_profile و آن را برابر با آدرس IP سرور قرار دهید.
سپس در api/index.js من خط را اصلاح می کنم const API_URL = 'http://127.0.0.1:5000/api' و آن را برابر قرار دهید process.env.API_URL.
بعد، در برنامه Flask باید یک ماژول جدید به نام اضافه کنم wsgi.py به عنوان نقطه ورود به Flask REST API خدمت کند. این wsgi.py ماژول کاملاً مشابه به نظر می رسد appserver.py ماژول به جز اینکه هیچ تماسی با آن ندارد run(...) روش شی برنامه این به این دلیل است که شی برنامه به عنوان یک فراخوان برای uWSGI عمل می کند container سرور برای اجرا در مقابل استفاده از پروتکل باینری سریع خود به جای سرور توسعه معمولی که در زمان ایجاد می شود app.run(...) نامیده میشود.
# backend/wsgi.py
from surveyapi.application import create_app
app = create_app()
با تمام شدن این کار، می‌توانم تغییراتم را به کنترل نسخه فشار دهم و به سرور تولید خود بروم تا پروژه را پایین بیاورم و برنامه‌هایی را که برای اجرای برنامه استفاده خواهم کرد، تنظیم کنم. روی سرور تولید
در حال آماده سازی سرور اوبونتو
در مرحله بعد وارد سرور خصوصی مجازی اوبونتو تولیدی خود می شوم که می تواند توسط یکی از بسیاری از سرویس های Cloud مانند AWS، DigitalOcean، Linode و غیره میزبانی شود و شروع به نصب همه چیزهایی می کنم که در لیست لیست کردم. مروری بر فناوری ها بخش.
$ apt-get update
$ apt-get install python3-pip python3-dev python3-venv nginx nodejs npm
با این نصب‌ها، اکنون می‌توانم کاربری به نام “بررسی” ایجاد کنم تا برنامه را در زیر اجرا کرده و کد را در خود جای دهد.
$ adduser survey
$ usermod -aG sudo survey
$ su survey
$ cd
اکنون باید در دایرکتوری اصلی کاربر “survey” در /home/survey باشم.
با ایجاد نظرسنجی کاربر می توانم آن را به روز کنم .bash\_profile فایلی که با افزودن این خط به انتهای فایل، حاوی آدرس IP سرور تولید من باشد. توجه داشته باشید که 123.45.67.89 نشان دهنده یک آدرس IP جعلی سرور من است. اگر دنبال می‌کنید آن را با آدرس IP واقعی خود جایگزین کنید.
export BASE_URL=123.45.67.89
بعد می خواهم به فایروال بگویم (ufw) که OpenSSH قابل قبول است و آن را فعال کنید.
$ sudo ufw allow OpenSSH
$ sudo ufw enable
با انجام این کار، اکنون مخزن را روی سرور کلون می کنم تا بتوانم آن را بسازم و مستقر کنم.
$ git clone https://github.com/amcquistan/flask-vuejs-survey.git
حالا من سی دی را وارد می کنم flask-vuejs-survey/frontend/survey-spa و وابستگی های فرانت اند و همچنین ساخت اپلیکیشن تولیدی را نصب کنید.
$ cd flask-vuejs-survey/frontend/survey-spa
$ npm install
$ npm run build
این یک دایرکتوری جدید به نام “dist” ایجاد می کند که حاوی یک index.html است page و یک دایرکتوری به نام “static” که شامل تمام فایل های CSS و جاوا اسکریپت کامپایل شده است. اینها چیزی است که من سرور Nginx را برای تشکیل برنامه فرانت اند SPA خواهم داشت.
در مرحله بعد، یک محیط مجازی در فهرست /home/survey برای یک مفسر Python3 ایزوله برای اجرای برنامه Python ایجاد خواهم کرد. پس از نصب، آن را فعال می کنم و به دایرکتوری پروژه باطن می روم تا بسته های وابستگی مشخص شده در آن را نصب کنم. requirements.txt فایل.
$ python3 -m venv venv
$ source venv/bin/activate
(venv) $ cd flask-vuejs-survey/backend
(venv) $ pip install -r requirements.txt
اکنون می توانم پایگاه داده SQLite را مقداردهی اولیه کنم و مهاجرت ها را برای ایجاد جداول پایگاه داده مختلف مورد نیاز REST API اجرا کنم.
(venv) $ python manage.py db upgrade
در این مرحله می‌خواهم سرور توسعه‌دهنده Flask را روشن کنم تا مطمئن شوم که همه چیز همانطور که انتظار می‌رود کار می‌کند. قبل از انجام این کار باید به آن بگویم ufw سرویسی برای اجازه تردد به داخل روی پورت 5000.
(venv) $ sudo ufw allow 5000
(venv) $ python appserver.py
در مرورگری که اکنون می توانم به آن بروم http://123.45.67.89:5000/api/surveys/ و من باید یک پاسخ JSON ساده را ببینم () زیرا هنوز هیچ نظرسنجی در این پایگاه داده وجود ندارد، اما این نشان می دهد که یک درخواست موفقیت آمیز انجام شده است. علاوه بر این، در terminal متصل به سرور باید یک پیام وارد شده برای آن وجود داشته باشد گرفتن درخواست از مرورگر من صادر شد.
Ctrl+C را در قسمت کلید می زنم terminal برای کشتن سرور توسعه دهنده Flask و حرکت روی برای پیکربندی uWSGI برای کنترل اجرای Flask REST API من. اگر تعجب می کنید که uWSGI از کجا آمده است، به عنوان یک الزام در آن مشخص شده است requirements.txt فایلی که من pip نصب شده با قبل
راه اندازی uWSGI Container سرور
مشابه کاری که با سرور توسعه‌دهنده Flask انجام دادم، اکنون آزمایش می‌کنم که سرور uWSGI می‌تواند برنامه را به صورت زیر ارائه دهد.
(venv) $ uwsgi --socket 0.0.0.0:5000 --protocol=http -w wsgi:app
مجدداً، با رفتن به مرورگر خود و بازخوانی همان درخواستی که قبلاً داده بودم، باید یک پاسخ آرایه JSON خالی را برگردانید. وقتی از پیشرفتم راضی شدم، دوباره می‌توانم Ctrl+C را در آن کلید بزنم terminal و حرکت کنید روی.
دو مرحله دیگر وجود دارد که می خواهم برای تکمیل پیکربندی uWSGI انجام دهم container سرور یک مرحله این است که یک فایل پیکربندی ایجاد کنید که uWSGI آن را بخواند و در آن جایگزین بسیاری از پرچم‌ها و آرگومان‌های خط فرمان شود که در بالا استفاده کردم. مرحله دوم ایجاد یک systemd فایل سرویس برای مدیریت uWSGI container سرور به عنوان یک سرویس مانند بسیاری از سرویس های دیگر که قبلاً در حال اجرا هستند روی سرور اوبونتو
در دایرکتوری backend فایلی به نام می سازم surveyapi.ini و آن را با موارد زیر پر کنید:
(uwsgi)
module = wsgi:app
master = true
processes = 4
socket = myproject.sock
chmod-socket = 660
vacuum = true
die-روی-term = true
این فایل پیکربندی به uWSGI اجازه می‌دهد بداند که قابل فراخوانی، شیء برنامه داخل آن است wsgi.py مدول. همچنین به آن می‌گوید که ایجاد کند و از چهار فرآیند برای رسیدگی به درخواست‌های برنامه‌ای که از طریق یک فایل سوکت به نام ارسال می‌شوند استفاده کند. surveyapi.sock که دارای مجوز کافی برای خواندن و نوشتن وب سرور Nginx از آن است. این vacuum و die-روی-term تنظیمات برای اطمینان از پاکسازی مناسب است.
برای systemd فایل سرویس، باید فایلی به نام ایجاد کنم surveyapi.service در /etc/systemd/system دایرکتوری و اضافه کردن چند توصیفگر به اضافه دستورات دسترسی، نوشتن و اجرا مانند:
(venv) $ sudo nano /etc/systemd/system/surveyapi.service
سپس آن را با موارد زیر پر کنید:
(Unit)
Description=uWSGI Python container server
After=network.target
(Service)
User=survey
Group=www-data
WorkingDirectory=/home/survey/flask-vuejs-survey/backend
Environment="PATH=/home/survey/venv/bin"
ExecStart=/home/survey/venv/bin/uwsgi --ini surveyapi.ini
(Install)
WantedBy=multi-user.target
اکنون می‌توانم سرویس را راه‌اندازی کنم و وضعیت آن را بررسی کنم و مطمئن شوم که فهرست باطن اکنون حاوی است surveyapi.sock.
(venv) $ sudo systemctl start surveyapi
(venv) $ sudo systemctl status surveyapi
Loaded: loaded (/etc/systemd/system/surveyapi.service; disabled; vendor preset: enabled)
Active: active (running) since Mon 2018-04-23 19:23:01 UTC; 2min 28s ago
Main PID: 11221 (uwsgi)
Tasks: 6
Memory: 28.1M
CPU: 384ms
CGroup: /system.slice/surveyapi.service
├─11221 /home/survey/venv/bin/uwsgi --ini surveyapi.ini
├─11226 /home/survey/venv/bin/uwsgi --ini surveyapi.ini
├─11227 /home/survey/venv/bin/uwsgi --ini surveyapi.ini
├─11228 /home/survey/venv/bin/uwsgi --ini surveyapi.ini
├─11229 /home/survey/venv/bin/uwsgi --ini surveyapi.ini
└─11230 /home/survey/venv/bin/uwsgi --ini surveyapi.ini
Apr 23 19:23:01 ubuntu-s-1vcpu-2gb-sfo2-01 uwsgi(11221): mapped 437520 bytes (427 KB) for 5 cores
Apr 23 19:23:01 ubuntu-s-1vcpu-2gb-sfo2-01 uwsgi(11221): *** Operational MODE: preforking ***
Apr 23 19:23:01 ubuntu-s-1vcpu-2gb-sfo2-01 uwsgi(11221): WSGI app 0 (mountpoint='') ready in 0 seconds روی interpreter 0x8b4c30 pid: 112
Apr 23 19:23:01 ubuntu-s-1vcpu-2gb-sfo2-01 uwsgi(11221): *** uWSGI is running in multiple interpreter mode ***
Apr 23 19:23:01 ubuntu-s-1vcpu-2gb-sfo2-01 uwsgi(11221): spawned uWSGI master process (pid: 11221)
Apr 23 19:23:01 ubuntu-s-1vcpu-2gb-sfo2-01 uwsgi(11221): spawned uWSGI worker 1 (pid: 11226, cores: 1)
Apr 23 19:23:01 ubuntu-s-1vcpu-2gb-sfo2-01 uwsgi(11221): spawned uWSGI worker 2 (pid: 11227, cores: 1)
Apr 23 19:23:01 ubuntu-s-1vcpu-2gb-sfo2-01 uwsgi(11221): spawned uWSGI worker 3 (pid: 11228, cores: 1)
lines 1-23
(venv) $ ls -l /home/survey/flask-vuejs-survey/backend
-rw-rw-r-- 1 survey survey 201 Apr 23 18:18 appserver.py
-rw-rw-r-- 1 survey survey 745 Apr 23 17:55 manage.py
drwxrwxr-x 4 survey survey 4096 Apr 23 18:06 migrations
drwxrwxr-x 2 survey survey 4096 Apr 23 18:52 __pycache__
-rw-rw-r-- 1 survey survey 397 Apr 23 18:46 requirements.txt
drwxrwxr-x 3 survey survey 4096 Apr 23 18:06 surveyapi
-rw-rw-r-- 1 survey survey 133 Apr 23 19:04 surveyapi.ini
srw-rw---- 1 survey www-data 0 Apr 23 19:23 surveyapi.sock
-rw-r--r-- 1 survey survey 10240 Apr 23 18:19 survey.db
-rw-rw-r-- 1 survey survey 84 Apr 23 18:42 wsgi.py
عالی! آخرین کاری که باید انجام دهم این است که هر بار که سیستم بوت می شود، راه اندازی خودکار را فعال می کند تا اطمینان حاصل شود که برنامه همیشه فعال است.
(venv) $ sudo systemctl enable surveyapi
راه اندازی Nginx
من از Nginx برای ارائه محتوای ثابت مانند HTML، CSS و جاوا اسکریپت و همچنین برای معکوس کردن فراخوانی‌های API REST پروکسی به برنامه Flask / uWSGI استفاده خواهم کرد. برای راه اندازی nginx برای انجام این موارد، باید یک فایل پیکربندی ایجاد کنم که روش مدیریت این درخواست های مختلف را تعریف کند.
در /etc/nginx/sites-available فایلی به نام بررسی ایجاد خواهم کرد که حاوی موارد زیر است:
server {
listen 80;
server_name 123.45.67.89;
location /api {
include uwsgi_params;
uwsgi_pass unix:/home/survey/flask-vuejs-survey/backend/surveyapi.sock;
}
location / {
root /home/survey/flask-vuejs-survey/frontend/survey-spa/dist;
try_files $uri $uri/ /index.html;
}
}
این فایل یک پیکربندی بلوک سرور جدید ایجاد می کند که می گوید به آدرس IP 123.45.67.89 گوش دهید. روی پورت استاندارد HTTP 80. سپس می‌گوید به دنبال هر مسیر URI باشید که با آن شروع میشود /api و با استفاده از فایل سوکت تعریف شده قبلی، آن را به سرور Flask / uWSGI REST API معکوس کنید. در نهایت، پیکربندی می‌گوید که همه چیزهای دیگر را در زیر / جمع‌آوری کنید و فایل index.html را در دایرکتوری dist ایجاد کنید که زمانی که برنامه Vue.js front-end SPA را قبلاً ایجاد کردم.
با ایجاد این فایل پیکربندی، باید با ایجاد یک پیوند نمادین به دایرکتوری فعال /etc/nginx/sites، به Nginx اطلاع دهم که یک سایت در دسترس است، مانند این:
$ sudo ln -s /etc/nginx/sites-available/survey /etc/nginx/sites-enabled
برای اجازه دادن به ترافیک روی پورت HTTP و اتصال به Nginx، به‌روزرسانی زیر را برای آن صادر می‌کنم ufw و همچنین پورت 5000 را که قبلاً باز شده است ببندید.
$ sudo ufw delete allow 5000
$ sudo ufw allow 'Nginx Full'
به دنبال این دستور، باید سرویس Nginx را مجدداً راه اندازی کنم تا به روز رسانی ها اعمال شوند.
$ sudo systemctl restart nginx
اکنون می توانم دوباره به مرورگرم بروم و بازدید کنم http://123.454.67.89 و برنامه نظرسنجی که در مقالات قبلی نشان داده ام به من ارائه می شود.
نتیجه
خوب این پست پایانی این مجموعه آموزشی چند قسمتی است روی روش استفاده از Flask و Vue.js برای ساختن یک برنامه SPA با قابلیت REST API. من سعی کرده‌ام بیشتر موضوعات مهمی را که در بسیاری از موارد استفاده از برنامه‌های وب مشترک هستند، با فرض دانش قبلی بسیار کمی از فناوری‌های Flask و Vue.js مورد استفاده، پوشش دهم.
از اینکه این سریال را دنبال کردید ممنونم و لطفا از نظر دادن یا نقد در زیر خجالت نکشید.
(برچسب‌ها به ترجمه)# python
منتشر شده در 1403-01-26 17:30:08
