作成したもの
インターンの制作物として、「私の作った料理のレシピブログ」を作りました。
料理一覧 (スマホ画面)
ウェブサイトの写真 (スマホ画面)
AWS構成図
・同一ec2内にReactとnode.jsのDockerコンテナを起動している。
・フロントエンドのReactが飛ばしたAPIをnode.jsが受け取り、Aurora DBに対してクエリを送る。
レシピブログのリレーショナルDB構成図
MySQLデータベースへのINSERT例
INSERT INTO recipes (id,title,serving, description) VALUES
('yylnj-tnl3m-peu2i','ほうれん草とツナの和え物','2人分','パパッと完成！茹でて和えるだけの簡単なひと品');
INSERT INTO ingredients (recipe_id,category, name, amount) VALUES
('yylnj-tnl3m-peu2i','','ほうれん草', '1袋'),
('yylnj-tnl3m-peu2i','', 'ツナ缶(オイル漬け)', '1/2缶'),
('yylnj-tnl3m-peu2i','調味料', '醤油', '小さじ1/3');
INSERT INTO instructions (recipe_id, instruction) VALUES
('yylnj-tnl3m-peu2i','ほうれん草の根元を少し切り取る'),
('yylnj-tnl3m-peu2i','ほうれん草を一本ずつ洗い、水気を切る'),
('yylnj-tnl3m-peu2i','沸騰した鍋に塩を入れる'),
('yylnj-tnl3m-peu2i','ほうれん草の葉の部分を手で持ち、茎の部分だけ30秒ほどゆでる'),
('yylnj-tnl3m-peu2i','全体を湯の中に入れ、5秒ほどゆでる。'),
('yylnj-tnl3m-peu2i','網目ボウルに茹であがったほうれん草を入れ、水を通し、冷ます'),
('yylnj-tnl3m-peu2i','水気を切る'),
('yylnj-tnl3m-peu2i','ほうれん草を四等分する'),
('yylnj-tnl3m-peu2i','皿にほうれん草とツナを合える');
MySQLのデータを元に、ウェブサイトのレシピが表示される。
こだわったポイント
レシピの材料にカテゴリを設けたこと
各材料が何の用途で用いられているかが、分かりやすい
画像のresize機能
料理の写真はs3に置いている。本ウェブアプリの特徴はユーザーの画面幅に合わせて、最適な画素数でユーザーに返していることです。
例
・IPhone12 画面幅390pxのユーザーに対しては、550画素数の写真を返す
・パソコン 画面幅1200pxのユーザーに対しては、900画素数の写真を返す
最適な画素数の写真の提供機能を実現させた手順は以下です。
・s3のバケットを作る。
・s3のバケットにdefaultフォルダを設け、レシピID.pngファイルをアップロードする
・lambdaとバックエンドのnode.jsを開発する
感想
私がEC2やAWSのRDSに触れるのは初めてのことで、public subnetを作成してもウェブサイトが表示されないという問題からインターンシップが始まりました。入社するまでの期限内に制作物を完成させる必要に迫られるこの感覚は、入社してからも体験することになると思うので、一足先に学べてよかったです。
Discussion