Saya suka memulai berbagai proyek sampingan, menurut saya ini adalah salah satu cara terbaik untuk mempelajari sesuatu yang baru dan sangat berharga. Dan saya memiliki satu kelemahan serius - saya hampir tidak pernah menyelesaikan sesuatu. Ini, tentu saja, bukan tentang proyek studi yang mana saya akan diberi nilai atau tugas yang ditetapkan oleh pemberi kerja. Saya berbicara tentang ide-ide saya sendiri yang saya nyalakan di luar pekerjaan atau studi konstan. Setiap kali saya menguasai beberapa keterampilan yang sama sekali baru yang saya anggap diminati dan saya tidak melihat prospek untuk mempelajari hal lain seperti itu, saya hanya melupakan proyek itu. Tapi kali ini saya memutuskan untuk meningkatkan diri saya - untuk memulai proyek, menyelesaikannya dan menceritakan tentang jalan yang saya lalui.
Sedikit tentang diriku
Saya memiliki pendidikan khusus, gelar sarjana dalam matematika, gelar master dalam bidang TI. Anehnya, cukup banyak hal yang saya kuasai di universitas yang bermanfaat bagi saya, terutama gelar master. Bagaimanapun, saya berhasil menyetel otak saya ke arah yang benar untuk menyerap informasi yang diperlukan secara produktif, menunjukkan diri saya dengan baik di bidang ini, mencari pekerjaan, dan maju dalam karier saya.
Saat belajar, saya adalah penggemar C ++ dan pengembang game. Kemudian saya mengembangkan mesin yang ditulis sendiri dan menulis game di atasnya, mencobanya. Saya memiliki ijazah C dan terhubung dengan penggunaan prosesor grafis dalam perhitungan. Kemudian saya tertarik dengan pengembangan Java dan Android. Dia menyelesaikan beberapa proyek pendidikan dalam bahasa ini, dan kemudian, sebagai bagian dari proyek siswa, dengan dukungan perusahaan internasional, menulis utilitas konsol untuk menganalisis kinerja program. Semua ini, kemudian, tumbuh menjadi aplikasi Android dengan kemampuan untuk menguji ponsel Anda dalam hal kinerja dan membandingkannya dengan yang lain.
Dunia python ada di cakrawala. Tanpa diduga, atas saran teman baik saya, saya menjadi tertarik dengan data science dan python, sudah lebih dari empat tahun yang lalu. Secara kebetulan, saya harus berganti pekerjaan dan keterampilan saya dinilai cocok untuk mulai mengerjakan backend untuk layanan analitik internal. Jadi, melalui analisis data, saya sampai pada pengembangan web dalam bahasa ini.
Sebagai tugas, saya juga harus menjadi pengembang tumpukan penuh ketika pengembang front-end yang sebenarnya sangat sibuk atau ketika standar kualitas UI tidak pada awalnya.
Ini adalah deskripsi jalur yang diperlukan untuk membuat aplikasi web Anda sendiri tanpa tenggelam dalam detail teknis. Tautan ke komit dari repositori saya akan dihapus di sepanjang jalan. Secara singkat tentang tahapan perjalanan ini:
- UI
- , , CI
- production-
- production-
- https
- AWS. , .
Pilihan subjek aplikasi adalah cerita lain; pilihan terakhir jatuh pada kebiasaan pelacakan. Halaman beranda akan memiliki sekumpulan tombol dengan kebiasaan terlacak. Kami melakukan tindakan - menekan tombol - dan setiap hari. Data harus disimpan dan ditampilkan pada halaman terpisah dalam bentuk tabel, kebiasaan dalam baris, dan hari kalender dalam kolom, sel yang terisi menunjukkan bahwa tindakan yang diperlukan telah dilakukan pada hari itu. Seperti pelacak kebiasaan kertas sederhana.
Tumpukan teknologi sangat jelas bagi saya: react, django, postgres, nginx, uwsgi.
Tata letak antarmuka awal
Saya memutuskan untuk memulai dari antarmuka pengguna dan menginstal nodejs.org/en/download/package-manager , github.com/facebook/create-react-app , lalu membuat proyek:
npx create-react-app easytrackDan saya memulai tata letak. Sejak awal, saya tidak bisa memikirkan hal yang lebih mudah daripada melakukan hardcode daftar objek logika bisnis secara langsung dalam program dan menampilkannya sebagai daftar di tag ul. Objek-objek tersebut adalah: grup topik, item yang dilacak, rekaman pelacakan aktual untuk item tertentu pada hari tertentu.
Pada halaman pertama, saya memiliki grup tematik, dan mengklik salah satu dari mereka membuka daftar item yang dapat dilacak.
Saya juga membuat halaman lain, yang berisi tabel sederhana dengan statistik hari-hari terakhir.
Kembangkan backend
Pada tahap ini, dibutuhkan backend. Diperlukan untuk menyimpan objek ke database, mengelola pengguna, dan membedakan hak. Saya sudah harus menggunakan Django untuk proyek saya sendiri (tentu saja tidak dibawa ke kesimpulan logisnya), tetapi ada satu kesulitan - saya harus menggunakan Django Rest Framework, yang belum pernah saya tangani sama sekali. Berkat Membangun Aplikasi Web Django 2.0 [1]. Saya membacanya dari sampul ke sampul, kecuali untuk bab terakhir, di mana mereka membuat API di DRF, saya membacanya dengan mata saya. Dalam perjalanan cerita, saya akan berpaling padanya lebih dari sekali.
Tidak ke mana-mana, buka dokumentasi www.django-rest-framework.org dan mulai merokok, dan juga membuka buku yang disebutkan.
Saya menginstal dan mengaktifkan lingkungan virtual, menginstal Django dan membuat proyek django di akar proyek:
virtualenv venv
. ./venv/bin/activate
pip install django
django createproject configSaya akan mengganti nama folder utama menjadi django, sehingga dengan nama semuanya tentang isinya segera jelas. Di dalamnya akan ada modul python yang disebut config, yang juga sangat nyaman. Kode frontend dibungkus dalam folder react. Ini adalah bagaimana struktur umum folder dikembangkan, yang telah dipertahankan hingga hari ini ( lihat Github ).
Di root proyek, saya membuat aplikasi utama:
django createapp coreMembuat kelas model logika bisnis dalam format yang sama persis di mana saya melakukan hardcode di depan, serializers, dan views ( tautan untuk berkomitmen di Github ).
Kami tidak repot dengan database dan menggunakan SQLite default. Melalui panel admin, saya mengunggah beberapa sampel data uji yang telah saya hardcode sebelumnya di depan. Kami mencoba untuk terhubung ke frontend. python3 manage.py runserver dalam satu tab, benang mulai di tab lain dan melaju.
Server pengembangan React berjalan pada port 3000, dan Django berjalan pada port 8000. Tidak ada yang lebih mudah daripada menulis permintaan ambil ('http: // localhost: 8000 / ...') di depan. Tetapi itu tidak berfungsi seperti itu karena cors-origin - perlindungan khusus yang mencegah situs apa pun membuat permintaan otomatis ke server mana pun. Oleh karena itu, tanpa berpikir dua kali, saya membangunnya di backenddjango-cors-headers ), mengkonfigurasinya - berhasil. Baru kemudian saya menebak untuk menambahkan bagian proxy ke package.json dan menunjuk ke backend, lalu fetch ('/ api / v1 / ...') mulai bekerja secara normal dan tidak diperlukan pengaturan tambahan lagi.
Pada awalnya, itu sangat naif, karena saya membuat permintaan asinkron di konstruktor - semuanya berfungsi untuk saya dan oke. Baru kemudian saya belajar tentang metode siklus hidup, di mana Anda bisa dan di mana Anda tidak boleh melakukan pekerjaan semacam ini. Sekarang elemen ditampilkan, elemen baru dapat dibuat.
Menerapkan manajemen pengguna dan pemisahan hak
Pada tahap ini, satu-satunya hal yang hilang adalah pemisahan hak atas elemen data: semuanya dibuat atas nama pengguna anonim yang tidak masuk. Saya harus mengintegrasikannya ke dalamnya tanpa merusak ekosistem django.
Untuk memulainya, saya melakukan hardcode login / kata sandi di frontend dan membentuk header Otorisasi dengan nilai 'Basic' + base64.encode (nama pengguna + ":" + kata sandi). Kemudian saya berpikir untuk membuat string dalam format base64 dan menyimpannya di klien saat memasukkan nama pengguna / kata sandi. Tetapi ada keraguan besar tentang keputusan ini dalam hal keamanan, saya ingin mencoba sesuatu yang berbeda.
Saya mencari-cari di Internet untuk waktu yang singkat dan belajar tentang teknologi JWT dan modul django-rest-framework-simplejwyang menyediakan kelas otentikasi untuk DRF dan tampilan untuk mendapatkan sepasang token dan untuk memperbarui token akses.
Dari sisi frontend, cukup dengan menyimpan beberapa token di localStorage dan meneruskan header Authorization dengan nilai "Bearer access-token". Akhirnya, saya meletakkan halaman login dan menutup semua akses untuk pengguna yang tidak sah ke situs menggunakan kelas izin ( link ke Github commit ). Di depan, jika tidak ada token penyegaran, saya dialihkan ke halaman login ( link ke Github commit ).
Kemudian, saya memungkinkan untuk mendaftar di situs, membuat tampilan di backend, meletakkan halaman, mengatur pengiriman permintaan. Di masa depan, impian saya adalah menulis aktivasi akun melalui surat.
Refactor, implementasikan fungsi dasar yang hilang, CI
Pada saat ini, aplikasi yang dapat digunakan minimal ternyata dan saya ingin mengumpulkan umpan balik. Saya menunjukkan aplikasi tersebut kepada istri saya dan meminta untuk menggunakannya tanpa satu pun permintaan dari pihak saya. Pendaftaran cukup berhasil, tetapi kemudian semuanya tidak berjalan seperti yang saya kira. Kemudian saya menyadari bahwa folder subjek tidak boleh menjadi yang terdepan, tetapi harus menjadi alat bantu, dan kami juga perlu menambahkan petunjuk bahwa kami membuat satu set tombol sehingga kami dapat mengkliknya sekali sehari. Dia berharap itu seperti pelacak kebiasaan kertas biasa dengan spreadsheet di mana Anda harus melukis di atas sel. Ketika saya menyadari hal ini, saya mulai melakukan refactoring. Dan selain itu, ada sesuatu yang perlu difaktorisasi ulang. Saya membahas struktur modul hampir dari awal.
Pada titik ini, saya memutuskan untuk menambahkan keindahan, gaya css, dan tata letak responsif. Dalam hal ini saya tidak terlalu kuat dan mengandalkan kerangka kerja CSS. Pilihan jatuh pada Bulma berdasarkan jumlah bintang, unduhan dari npmjs.com , meskipun saya tidak ingin mengambil Bootstrap. Paling tidak, saya mengatasi tugas ini.
Secara paralel, saya meningkatkan fungsi backend. Membuat CRUD penuh. Impian untuk mengkonfirmasi pendaftaran melalui surat juga menjadi kenyataan. Saya menemukan fungsi pengiriman surat, memperoleh kemampuan untuk men-debug semuanya melalui server email debug.
python -m smtpd -n -c DebuggingServer localhost:1025Untuk pementasan, saya memulai akun Google sampah dan berhasil mengatur pengiriman surat melalui email Google.
Adapun cakupan pengujian untuk backend, semuanya bekerja dengan baik untuk dirinya sendiri, tetapi untuk frontend semuanya masih cukup lamban. Tapi saya jangan putus asa, tiba-tiba nanti ternyata disesuaikan.
Langkah selanjutnya adalah menyiapkan CI, saya memulai GithubActions untuk menjalankan tes, menggunakan konstruktor konfigurasi untuk menjalankannya, mengubahnya sedikit dan hanya itu.
Buat pengaturan untuk lingkungan produksi
Setelah beberapa saat memasukkan kode dan detail kecil dari logika secara berurutan, saya harus mulai membentuk konfigurasi produksi. Untuk ini saya terinspirasi oleh buku yang sama [1]. Saya membagi file konfigurasi-django, ketergantungan-python menjadi 3 bagian ( tautan ke komit Github ):
- umum - semua yang Anda butuhkan untuk lingkungan apa pun
- dev —
- prod —
, .
uwsgi, nginx , dockerfile, .
[1] «1 — 1 », , , . phusion/baseimage, Ubuntu, .
, , postgres, . ( Github).
production-
, [1], AWS, . , - . , , , , . Free Tier, , , ? .
, AWS - , . , . , ECS.
Elastic Container Service
Saya melihat bahwa pembuat Github Actions memungkinkan Anda membuat konfigurasi untuk tugas penerapan kontainer berkelanjutan di AWS ECS. Katakanlah saya mulai mempelajari layanan ini dan menyadari bahwa di konsol lokal saya perlu membuat cluster, membuat definisi tugas, dan mendeskripsikan container, setelah sebelumnya menyimpan image-nya di layanan AWS ECR lain, yaitu Dockerhub menurut fungsinya. Konsol menawarkan 2 jenis cluster: Fargate dan EC2. Teknologi pertama benar-benar tanpa server, artinya kita baru saja memulai penampung dan runtime akan menangani semuanya. Penampung dalam cluster jenis kedua dijalankan pada instance mesin virtual mereka sendiri di cloud. Tidak ingin mendalami ini untuk waktu yang lama, saya membuat cluster berdasarkan Fargate. Tetapi saya menemukan fakta bahwa saya tidak dapat memberikan nilai rahasia ke wadah,karena itu, tugasnya terus menerus jatuh.
Ketika saya mencoba untuk membawa penampung ke status kerja, cluster telah bekerja selama beberapa jam dan uang ditambahkan ke tab saya dengan pembayaran untuk layanan. Teknologinya sendiri ternyata berbayar dan tidak berlaku untuk Tingkat Gratis. Saya melunasi cluster dan memutuskan untuk menangani pembayaran nanti. Saya membaca di dokumentasi bahwa Anda tidak perlu membayar ekstra untuk menggunakan ECS selain EC2, kecuali untuk menggunakan sumber daya EC2, tetapi EC2 dicakup oleh Tingkat Gratis dan saya memutuskan untuk mencoba jalur ini.
Dukungan AWS
Pada akhirnya, seseorang berbohong kepada saya dan mereka menagih saya lebih banyak uang untuk konfigurasi ini. Total $ 0,32, meskipun sedikit, tetapi masih memalukan. Kemudian saya menulis untuk mendukung, mengatakan bahwa saya mengalami kesulitan dengan penyiapan dan sepanjang waktu berpikir bahwa saya cocok dengan Tingkat Gratis, tetapi tidak ada yang berhasil untuk saya, dan uang itu ditarik. Saya meminta bantuan. Menanggapi panggilan saya, mereka dengan senang hati menjawab, memberikan voucher sebesar $ 1, yang mencakup semua biaya tak terduga. Baiklah.
Akibatnya, saya harus melupakan layanan kontainer ini dan menguasai EC2 dalam bentuknya yang paling murni.
Cloud Komputasi Elastis
EC2 — . Free Tier 750 . , , - , .
[1] docker-machine, . , EC2. docker .
, dockre-machine create… EC2. docker-compose up -d . 80 . , «Public DNS» , .
Relational Database Service
AWS RDS. . , ( postgres) , Free Tier, . , , .
Simple Email Service
Saya juga harus menghadapi kenyataan bahwa surat-surat itu tidak terkirim. Faktanya adalah bahwa semua layanan email melarang IP yang cocok dengan instans EC2 untuk melawan spam. Sangat penting untuk menggunakan SES. Layanan AWS lainnya.
Saya juga mengkonfigurasinya, menunjukkan kotak surat dari mana saya akan mengirim surat, semuanya baik-baik saja. Namun, tidak semuanya sejauh ini cerah. Akun baru dalam mode kotak pasir secara default, yang tidak memungkinkan pengiriman email ke kotak surat yang belum dikonfirmasi. Harus mengonfirmasi kotak untuk penguji beta saya.
Daftarkan domain dan konfigurasikan sertifikat untuk akses https
Untuk menguji aplikasi sepenuhnya, diperlukan untuk mengatur koneksi https, dan ini ternyata tidak mungkin tanpa mendaftarkan domain. Saya tidak ingin membahayakan alamat email, kata sandi, dan token dengan mentransfernya melalui koneksi yang tidak aman. Untuk kasus ini, saya mencari di seluruh Internet. Beberapa pendaftar tidak cocok, karena mahal, tetapi di suatu tempat sangat mahal, selain itu, banyak yang hanya memiliki ulasan yang buruk. Saat saya mencari, jaringan periklanan Yandex memahami apa yang saya inginkan dan segera menawarkan saya perusahaan tempat Anda dapat mendaftarkan domain seharga 39 rubel. Ada lebih banyak ulasan tentang layanan ini, jadi saya membuat akun, memilih domain gratis dan mendaftarkannya untuk saya.
Kemudian, untuk mengakses instans EC2 saya menggunakan domain ini, saya membuat zona hosting di layanan AWS Route 53, mendaftarkan pengaturan DNS, dan menulis ulang catatan NS di akun pribadi layanan tempat domain didaftarkan ke Amazon.
Saya menggunakan layanan Let's Encrypt untuk membuat sertifikat. Saya berhenti di konfigurasi ini: nginx lokal membuat proxy_pass ke alamat container, container berputar dan dapat diakses melalui port 8080. Tidak sulit untuk menggunakan utilitas konsol certbot, menghasilkan sertifikat dan mengkonfigurasi https secara otomatis. Terakhir, izinkan akses ke mesin virtual pada port 443.
Perkembangan proyek telah sampai pada kesimpulan logisnya
, . , , SES , . , . , , , , , , , , . , , . :
- , , . .
- -
- ,
- , -
— , , . React , AWS, , , .
Tetapi realisasi utamanya adalah bahwa seseorang yang ada di lapangan bukanlah seorang pejuang sama sekali. Saya mengerjakan proyek ini selama lebih dari dua bulan, berjam-jam di waktu luang saya ... Dan tahukah Anda? Aku belum menjahitnya begitu parah. Jelas terlihat bahwa semakin tua usia Anda, semakin sedikit keinginan untuk mempelajari sesuatu yang "begitu saja", semakin sedikit keinginan untuk bekerja keras pada beberapa hal yang "hanya menarik". Tetapi pada saat yang sama Anda memperhatikan bahwa ada lebih banyak peluang yang tersedia untuk melakukan sesuatu demi kebaikan, demi keuntungan. Anda mulai menghargai upaya terfokus, kerja tim, serta relaksasi, waktu yang dihabiskan dengan orang-orang dekat.