フィールドにいるのは戦士ではなく、フルスタックバックエンドがどのようになりたかったのか

私はさまざまなサイドプロジェクトを始めるのが大好きです。これは、新しくて本当に価値のあることを学ぶための最良の方法の1つだと思います。そして、私には1つの重大な欠陥があります-私はほとんど物事を成し遂げることがありません。もちろん、これは私が雇用主によって設定された等級やタスクを与えられる研究プロジェクトに関するものではありません。私は、絶え間ない仕事や勉強の外で私が照らしている自分の考えについて話している。需要があると思われるまったく新しいスキルを習得するたびに、そのようなことを学ぶ見込みがないので、プロジェクトのことを忘れてしまいます。しかし今回、私は自分自身を改善することに決めました-プロジェクトを開始し、それを完了し、私がたどった道について話します。

私自身について少し

私は専門教育、数学の学士号、ITの修士号を持っています。驚いたことに、私が大学で習得した多くのこと、特に修士号は私にとって役に立ちました。いずれにせよ、私は必要な情報を生産的に吸収し、この分野で自分自身をうまく示し、仕事を見つけ、そして私のキャリアを前進させるために、私の脳を正しい方向に調整することができました。



勉強している間、私はC ++ファンでゲーム開発者でした。それから私は自作のエンジンを開発し、それにゲームを書いてみました。私はCで卒業証書を持っていて、計算でのグラフィックプロセッサの使用に関連していました。それから私はJavaとAndroidの開発に興味を持ちました。彼はこの言語でいくつかの教育プロジェクトを完了し、その後、学生プロジェクトの一環として、国際企業の支援を受けて、プログラムのパフォーマンスを分析するためのコンソールユーティリティを作成しました。これらすべてが、パフォーマンスの観点から携帯電話をテストし、他の携帯電話と比較する機能を備えたAndroidアプリケーションに成長しました。



パイソンの世界が間近に迫っていました。意外なことに、親友の提案でデータサイエンスとパイソンに興味を持ち始めたのは4年以上前のことです。偶然にも、私は転職しなければならず、私のスキルは、内部分析サービスのバックエンドでの作業を開始するのに適していると評価されました。それで、データ分析を通して、私はこの言語でのウェブ開発に行き着きました。



義務として、実際のフロントエンド開発者が非常に忙しいとき、またはUI品質基準がそもそもなかったときも、私はフルスタック開発者でなければなりませんでした。

これは、技術的な詳細に完全に没頭することなく、独自の本格的なWebアプリケーションを作成するために要したパスの説明です。リポジトリからのコミットへのリンクは途中で削除されます。この旅の段階について簡単に説明します。

• UI
• , , CI
• production-
• production-
• https

- AWS. , .

アプリケーションの主題の選択は別の話であり、最終的な選択は追跡の習慣にありました。ホームページには、追跡された習慣を持つボタンのセットがあります。私たちは行動を起こしました-ボタンを押しました-そして毎日。データは保存して別のページに表、習慣を行、暦日を列の形式で表示する必要があります。塗りつぶされたセルは、必要なアクションがその日に実行されたことを示します。単純な紙の習慣トラッカーのように。

技術的なスタックは私には明白でした：react、django、postgres、nginx、uwsgi。

初期UIのレイアウト

ユーザーインターフェイスから始めて、nodejs.org / en / download / package- manager、github.com / facebook / create-react-appをインストールし、プロジェクトを作成することにしました。

npx create-react-app easytrack

そして、レイアウトを始めました。当初から、ビジネスロジックオブジェクトのリストをプログラムに直接ハードコーディングし、それらをulタグのリストとして表示することほど簡単なことは考えられませんでした。これらのオブジェクトは、トピックグループ、追跡対象アイテム、特定の日の特定のアイテムの実際の追跡レコードです。



最初のページにテーマ別グループがあり、それらのいずれかをクリックすると、追跡可能なアイテムのリストが開きました。



また、過去数日間の統計を含む簡単な表を含む別のページを作成しました。

バックエンドを開発する

この段階では、バックエンドが必要でした。オブジェクトをデータベースに保存し、ユーザーを管理し、権限を区別する必要があります。私はすでに自分のプロジェクトにDjangoを使用する必要がありましたが（もちろん、論理的な結論には至りませんでした）、1つの問題がありました。DjangoRestFrameworkを使用する必要がありました。Django 2.0Webアプリケーションの構築に感謝します[1]。彼らがDRFでAPIを作成した最後の章を除いて、私はそれをカバーからカバーへと調べました、私は私の目でそれをざっと見ました。話の途中で、私は何度も彼女に目を向けます。



どこにも行けず、www.django-rest-framework.orgのドキュメントを開いて喫煙を開始し、言及された本にも目を向けました。



仮想環境をインストールしてアクティブ化し、Djangoをインストールして、プロジェクトのルートにdjangoプロジェクトを作成しました。

virtualenv venv
. ./venv/bin/activate
pip install django
django createproject config

メインフォルダの名前をdjangoに変更します。これにより、名前によってその内容に関するすべてがすぐに明確になります。その中にはconfigと呼ばれるpythonモジュールがあります。これも非常に便利です。反応フォルダにラップされたフロントエンドコード。これが一般的なフォルダ構造の開発方法であり、今日まで存続しています（Githubを参照）。



プロジェクトのルートで、メインアプリケーションを作成しました。

django createapp core

フロント、シリアライザー、ビュー（Githubでコミットするためのリンク）でハードコーディングしたのとまったく同じ形式でビジネスロジックモデルのクラスを作成しました。

データベースを気にせず、デフォルトのSQLiteを使用します。管理パネルから、前にハードコーディングしたいくつかのテストデータサンプルをアップロードしました。フロントエンドに接続しようとしています。 python3 manage.py runserverを1つのタブで、yarnを別のタブで開始して運転しました。



React開発サーバーはポート3000で実行され、Djangoはポート8000​​で実行されます。前面にフェッチ（ 'http：// localhost：8000 / ...'）要求を書き込むことほど簡単なことはありません。しかし、cors-originは、サイトがサーバーに自動リクエストを送信できないようにする特別な保護機能であるため、そのようには機能しませんでした。したがって、よく考えずに、バックエンドに組み込みましたdjango-cors-headers）、構成しました-動作しました。その後、package.jsonにプロキシセクションを追加してバックエンドをポイントすると推測し、フェッチ（ '/ api / v1 / ...'）が正常に機能し始め、追加の設定は不要になりました。



最初は、コンストラクターで非同期リクエストを行ったため、ひどくナイーブでした。すべてがうまくいき、大丈夫でした。後になってようやく、この種の作業を実行できる場所と実行してはならないライフサイクル方法について学びました。これで要素が表示され、新しい要素を作成できました。

ユーザー管理と権利の分離を実装する

この段階で欠けていたのは、データ要素に対する権利の分離だけでした。これらはすべて、匿名の非ログインユーザーに代わって作成されました。 djangoのエコシステムを壊すことなく、どういうわけかそれに統合する必要がありました。



まず、フロントエンドでログイン/パスワードをハードコーディングし、値 'Basic' + base64.encode（ユーザー名+ "：" +パスワード）でAuthorizationヘッダーを作成しました。次に、base64形式の文字列を生成し、ユーザー名/パスワードを入力するときにクライアントに保存することを考えました。しかし、安全性の観点からこの決定には大きな疑問がありました。私は別のことを試みたかったのです。



私はインターネットで少しの間騒ぎ、JWTテクノロジーとdjango-rest-framework-simplejwモジュールについて学びました。これは、トークンのペアを取得し、アクセストークンを更新するためのDRFとビューの認証クラスを提供しました。



フロントエンド側からは、localStorageにいくつかのトークンを保存し、値が「Beareraccess-token」のAuthorizationヘッダーを渡すだけで十分でした。最後に、ログインページをレイアウトし、権限クラス（Github commitへのリンク）を使用して、許可されていないユーザーのサイトへのすべてのアクセスを閉じました。前面に、更新トークンがない場合は、ログインページにリダイレクトしました（Githubコミットへのリンク）。



次に、サイトへの登録、バックエンドでのビューの作成、ページのレイアウト、送信リクエストの設定を可能にしました。将来、私の夢はメールでアカウントアクティベーションを書くことでした。

リファクタリング、不足している基本機能の実装、CI

この時点で、最小限の使用可能なアプリケーションが判明し、フィードバックを収集したいと思いました。私は妻にアプリケーションを見せて、私の側からの単一のプロンプトなしでそれを使用するように頼みました。登録は大成功でしたが、思ったとおりにすべてがうまくいきませんでした。次に、サブジェクトフォルダーを最前線に置くのではなく、補助ツールにする必要があることに気付きました。また、ボタンのセットを作成して1日1回クリックできるようにするヒントを追加する必要があります。彼女はそれがあなたが細胞の上に塗る必要があるスプレッドシートを備えた通常の紙の習慣トラッカーのようであると期待しました。これに気づいたとき、私はリファクタリングを始めました。そしてそれ以外に、リファクタリングするものがありました。モジュール構造をほぼゼロから調べました。



この時点で、美しさ、cssスタイル、応答性の高いレイアウトを追加することにしました。この点で、私は特に強くはなく、CSSフレームワークに依存しています。選択はに落ちたブルマ星からのダウンロード数に基づいて、npmjs.com私はブートストラップを取りたくなかったという事実にもかかわらず、。少なくとも、私はこのタスクに対処しました。



並行して、バックエンド機能を改善しました。完全なCRUDを作成しました。メールで登録を確認するという夢も実現しました。私は手紙を送る機能を理解し、デバッグメールサーバーを介してすべてをデバッグする能力を獲得しました。

python -m smtpd -n -c DebuggingServer localhost:1025

ステージングのために、私はジャンクGoogleアカウントを開始し、なんとかGoogleメールで手紙を送るように設定しました。



バックエンドのテストカバレッジに関しては、すべてがそれ自体で非常にうまくいきましたが、フロントエンドの場合、すべてがまだかなり遅いです。しかし、私は絶望していません、突然、それは調整されることが判明します。



次のステップはCIを設定することでした。テストを実行するために、GithubActionsを起動し、構成コンストラクターを使用して実行し、少し調整しました。それだけです。

実稼働環境の設定を生成する

しばらくして、コードとロジックの細部を整理した後、本番構成の作成を開始する必要がありました。このために私は同じ本[1]に触発されました。django-configurationファイル、python-dependenciesを3つの部分に分割しました（Githubコミットへのリンク）：

• 共通-あらゆる環境に必要なすべて
• dev —
• prod —

, .



uwsgi, nginx , dockerfile, .



[1] «1 — 1 », , , . phusion/baseimage, Ubuntu, .



, , postgres, . ( Github).

production-

, [1], AWS, . , - . , , , , . Free Tier, , , ? .



, AWS - , . , . , ECS.

Elastic Container Service

Github Actions Builderを使用すると、AWSECSで継続的なコンテナー展開タスクの構成を作成できることがわかりました。このサービスを詳しく調べ始めたとしましょう。ローカルコンソールで、クラスターを作成し、タスク定義を作成し、コンテナーを記述する必要があることに気付きました。以前は、そのイメージを別のAWS ECRサービス（機能的にはDockerhub）に保存していました。コンソールには、FargateとEC2の2種類のクラスターが用意されていました。最初のテクノロジーは完全にサーバーレスです。つまり、コンテナーを起動するだけで、ランタイムがすべてを処理します。 2番目のタイプのクラスターのコンテナーは、クラウド内の独自の仮想マシンインスタンスで実行されます。長い間これに飛び込みたくなかったので、私はFargateに基づいてクラスターを作成しました。しかし、私は秘密の値をコンテナに渡すことができなかったという事実に遭遇しました、このため、タスクは常に低下していました。



コンテナを動作状態にしようとしている間、クラスタは数時間動作していて、サービスの支払いでタブにお金が追加されました。テクノロジー自体は有料であることが判明し、無料利用枠には適用されません。私はクラスターを完済し、少し後で支払いを処理することにしました。EC2リソースを使用する場合を除いて、EC2の上でECSを使用するために追加料金を支払う必要がないことをドキュメントで読みましたが、EC2は無料利用枠でカバーされているため、このパスを試すことにしました。

AWSサポート

結局、誰かが私に嘘をつき、彼らは私にこの構成のためにもう少しお金を請求しました。少額ではありますが、それでも残念でしたが、合計0.32ドルでした。それから、私はセットアップに問題があり、常に無料枠に収まると思っていたと言いましたが、何もうまくいかず、お金が引き出されました。私は助けを求めた。私の電話に応えて、彼らは喜んで応答し、すべての予期しない費用をカバーする1ドルのバウチャーを与えました。うまく。



その結果、私はこのコンテナサービスとマスターEC2を最も純粋な形で忘れなければなりませんでした。

Elastic Computing Cloud

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

私はまた、手紙が送られていないという事実に直面しなければなりませんでした。事実、すべてのメールサービスは、スパムに対抗するためにEC2インスタンスに一致するIPを禁止しています。SESを使用することが不可欠でした。別のAWSサービス。



また、それを構成し、手紙を送信するメールボックスを示しました。すべて問題ありません。しかし、これまでのところすべてがそれほどバラ色であるわけではありません。新しいアカウントはデフォルトでサンドボックスモードになっており、未確認のメールボックスにメールを送信することはできません。ベータテスターのボックスを確認する必要がありました。

ドメインを登録し、httpsアクセス用の証明書を構成します

アプリケーションを完全にテストするには、https接続をセットアップする必要がありましたが、これはドメインを登録しないと不可能であることが判明しました。安全でない接続を介して転送することにより、電子メールアドレス、パスワード、およびトークンを危険にさらしたくありませんでした。この場合、私はインターネット全体を検索しました。一部のレジストラは高価であるため適合しませんでしたが、どこかで非常に高価であり、その上、多くのレジストラはひどいレビューを持っています。私が探していたとき、Yandex広告ネットワークは私が何を望んでいるかを理解し、すぐに39ルーブルのドメインを登録できる会社を提供してくれました。このサービスについてのレビューがもっとあったので、私はアカウントを作成し、無料のドメインを選択して登録しました。



次に、このドメインを使用してEC2インスタンスにアクセスするために、AWS Route 53サービスでホスティングゾーンを作成し、DNS設定を登録し、ドメインが登録されたサービスの個人アカウントのNSレコードをAmazonのものに書き直しました。



Let'sEncryptサービスを使用して証明書を作成しました。私はこの構成に落ち着きました。ローカルnginxがコンテナーアドレスへのproxy_passを作成し、コンテナーが回転し、ポート8080からアクセスできます。certbotコンソールユーティリティを使用して証明書を生成し、httpsを自動的に構成することは難しくありませんでした。最後に、ポート443で仮想​​マシンへのアクセスを許可します。

プロジェクトの開発は論理的な結論に達しました

, . , , SES , . , . , , , , , , , , . , , . :

• , , . .
• -
• ,
• , -

— , , . React , AWS, , , .



しかし、主な認識は、現場の人はまったく戦士ではないということです。私はこのプロジェクトに2か月以上、空き時間に何時間も取り組んでいました...そしてあなたは何を知っていますか？私はまだそれほどひどく縫い付けていません。年をとるほど、「そのような」ことを学びたいという欲求が少なくなり、「ただ面白い」ことについて多くのことを学びたいという欲求が少なくなることがわかります。しかし同時に、あなたは利益のために何かをするためのより多くの利用可能な機会があることに気づきます。あなたは集中的な努力、チームワーク、そしてリラックス、親しい人々と過ごす時間に感謝し始めます。

Githubのコード。

リンク

1. Django 2.0Webアプリケーションの構築