In diesem Artikel die Punkte, dass ich Schwierigkeiten hatte, die App zu entwickeln, Ich möchte die Artikel und Lehrmaterialien vorstellen, auf die ich mich bei der Implementierung der einzelnen Funktionen bezogen habe.

App Übersicht

Es ist eine SNS-Anwendung zum Thema Morgenaktivitäten.

• Sie können morgendliche Aktivitäten durchführen und "stetig" fortfahren.
• Teilen Sie das "Talent" der Morgenaktivitäten, um Frustrationen bei den Morgenaktivitäten zu vermeiden

Basierend auf diesem Konzept haben wir einen Dienst namens ** "Asa Kotsu" ** mit dem Wort "Morgenaktivität" entwickelt. Die URL ist hier ↓. Wenn Sie möchten, können Sie es gerne bewegen ^^

App-URL: https://pf.asakotsu.com/ (* Da die Smartphone-Unterstützung noch nicht abgeschlossen ist, wird empfohlen, auf einem PC zu surfen ^^;)

GitHub-URL: https://github.com/ngsw877/asakotsu

Bild des Nutzungsbildschirms

Top-Seite (Post-Liste und Ranking usw.)

Post Liste nach Tag

Post Details und Kommentarliste

Besprechungsliste vergrößern

Bildschirm mit Benutzerdetails

Beim frühen Aufstehen

Unendliche Schriftrolle

Funktionen dieser App

Grundsätzlich ist es ein SNS mit Posts, Kommentaren, Likes und Follow-Funktionen wie Twitter, Darüber hinaus handelt es sich um eine Anwendung mit den folgenden Funktionen.

• Sie können Zoom-Meetings für Morgenaktivitäten in der App erstellen, bearbeiten und löschen (Zoom-API-Integration).
• Sie können eine Ziel-Weckzeit festlegen und die Anzahl der Tage aufzeichnen, die Sie für das frühe Aufwachen erreicht haben.
• Ranking-Funktion für die Anzahl der Tage, an denen Sie früh aufstehen müssen (aggregiert monatlich)
• Sie können Beiträge (Kategorie) markieren und Tipps für Aktivitäten am Morgen mit Tags für Tipps für den Morgen usw. teilen.

Technologie verwendet

• Vorderes Ende

• Vue.js 2.6.11

• jQuery 3.4.1

• HTML / CSS / Sass / MDBootstrap

• __ Backend __

• PHP 7.4.9

• Laravel 6.18.36

• PHPUnit 8.5.8

• ZoomAPI (guzzlehttp/guzzle 7.0.1)

• infrastruktur

• CircleCi

• Docker 19.03.12 / docker-compose 1.26.2

• nginx 1.18

• mysql 5.7.31 / PHPMyAdmin

• AWS ( EC2, ALB, ACM, S3, RDS, CodeDeploy, SNS, Chatbot, CloudFormation, Route53, VPC, EIP, IAM )

Die serverseitige Logik ist in PHP / Laravel programmiert Das detaillierte Design des Frontends wurde mit Sass arrangiert, und als ich Bewegung hinzufügen wollte, implementierte ich es mit Vue.js und jQuery. Verwenden Sie Docker / Docker-Compose für die Entwicklungsumgebung Für die CI / CD-Pipeline haben wir einen automatisierten Test mit CircleCI erstellt Ich versuche, die automatische Bereitstellung mit CodeDeploy von AWS zu realisieren.

Infrastrukturkonfigurationsdiagramm

Über Entwicklungsumgebung und Produktionsumgebung

Ich verwende "Docker / Docker-Compose" für die Entwicklungsumgebung und verwende Container für die folgenden vier Zwecke.

1. Webserver-Container: Nginx
2. Anwendungscontainer: PHP / Laravel / Vue.js
3. DB-Container: MySQL
4. Container für die DB-Verwaltung: PHPMyAdmin

Referenzlink:

• [Erstellen einer Laravel + Vue-Ausführungsumgebung (LEMP-Umgebung) mit Docker, die niemals fehlschlägt ~ Teil 1 ~](https://qiita.com/shimotaroo/items/29f7878b01ee4b99b951#8docker-composeyml%E3%82%B3 % E3% 83% B3% E3% 83% 86% E3% 83% 8A% E3% 81% AE% E8% A8% AD% E5% AE% 9A% E3% 83% 95% E3% 82% A1% E3 % 82% A4% E3% 83% AB% E3% 82% 92% E4% BD% 9C% E6% 88% 90% E3% 81% 99% E3% 82% 8B)

• Erstellen einer Laravel 6.8 + Vue-Ausführungsumgebung (LEMP-Umgebung) mit Docker, die niemals fehlschlägt ~ Teil 2 ~

• phpMyAdmin auf Docker ist zu bequem

Ich wollte mit ECS auf AWS in der Produktionsumgebung bereitstellen. Wegen hoher Schwierigkeit aufgegeben ... Vorläufig habe ich mich an die Erfahrung mit der Bereitstellung auf EC2 gewöhnt, und diesmal habe ich eine Umgebung auf EC2 erstellt.

Ausstellung des SSL-Zertifikats

Ich verwende ACM (AWS Certificate Manager), weil ich ein SSL-Zertifikat ausstellen und eine HTTPS-Konvertierung durchführen wollte.

Zusätzlich zu EC2 sind für die Verwendung von ACM auch "ALB (ELB)" und "CloudFront" erforderlich. Daher habe ich mich entschlossen, dieses Mal ALB einzuführen. Obwohl ALB verwendet wird, ~~ um Geld zu sparen ~~ Derzeit wird nicht erwartet, dass genügend Zugriff vorhanden ist, um die Last zu verteilen oder zu skalieren, sodass nur eine EC2-Instanz vorbereitet wird. Selbst wenn in der Adressleiste eine Sperrmarkierung vorhanden ist, werden die CSS- und JS-Dateien nicht gelesen oder das Routing wird nicht in https konvertiert, es sei denn, die Proxy-Einstellungen auf der Laravel-Seite sind festgelegt. Seien Sie also vorsichtig. ..

Referenzlink:

• AWS: So erhalten Sie kostenlos ein SSL-Zertifikat
• Einstellungen für vertrauenswürdige Proxys

In S3-Bucket hochladen

S3 wird für die folgenden zwei Zwecke vorbereitet.

1. Speichern Sie die mit CircleCI erstellte Quelle

2. Speichern Sie die von der Anwendung hochgeladenen Bilddaten auf EC2

In Bezug auf 2 gab es etwas Unerwartetes zu tun, z. B. das Festlegen der Bucket-Richtlinie von S3 und das Installieren des Pakets für S3 auf der Laravel-Seite.

Referenzlink:

• AWS (IAM: Benutzer, S3: Bucket) -Einstellungen für Schienen, Laravel (Bild-Upload)
• Bilder mit Laravel in AWS S3 hochladen

Benachrichtigungseinstellungen für Slack

Durch Verknüpfen von "CodeDeploy" mit "SNS" und "Chatbot" werden Benachrichtigungen zu Beginn und am Ende der automatischen Bereitstellung an das Slack-Konto gesendet. Sehr angenehm.

Funktionsliste

• __ Benutzerregistrierung bezogen __

• Neue Registrierung, Profilbearbeitungsfunktion

• An- und Abmeldefunktionen

• Einfache Anmeldefunktion (Gastbenutzer-Login)

• __ Zoom API Integration __

• Morgenaktivität Zoom-Meeting-Funktion (CRUD)

• Neue Funktion zum Treffen, Auflisten, Bearbeiten und Löschen

• __ Beurteilungsfunktion zum Erreichen eines frühen Aufstiegs __

• Die Ziel-Weckzeit kann für jeden Benutzer festgelegt werden (von 4:00 bis 10:00 Uhr).

• Wenn Sie vor der gewünschten Weckzeit posten können, erhöht sich der Leistungsnachweis für das frühe Aufwachen um einen Tag.
  

• • Wenn Sie nach Mitternacht posten, stehen Sie nicht früh auf und haben Erfolg.
    Selbst wenn Sie 3 Stunden vor der gewünschten Weckzeit posten, ist diese ungültig.
    (Beispiel) Wenn die Ziel-Weckzeit auf 07:00 eingestellt ist und Sie von 04:00 bis 07:00 posten können, stehen Sie früh auf.

• __ Funktion zum Ranking der frühen Weckleistung des Benutzers (jeden Monat) __

• __ Unendliche Bildlauffunktion __ (jQuery / inview.js / ajax)

• __ User Post Related (CRUD) __

• __ Kommentarfunktion __

• __ Tag-Funktion __ (Eingabe von Vue.js / Vue-Tags)

• __ Wie Funktion __ (Vue.js / ajax)

• __ Funktion folgen __ --Folgende / Follower-Liste (Seitennation)

• __ Flash-Nachrichtenanzeigefunktion __ (jQuery / Toastr)

• Flash-Nachrichten beim Posten, Bearbeiten, Löschen, Anmelden und Abmelden anzeigen

• __ Bild-Upload-Funktion __ (AWS S3-Bucket)

• __PHPUnit Test __

DB Design

ER-Diagramm

Über jeden Tisch

Punkte im Zusammenhang mit der Funktion zum frühen Aufwachen

Die wake_up_time in der ** Benutzertabelle ** bedeutet die ** Ziel-Weckzeit ** des Benutzers. Wenn der Benutzer früher als zu dieser Zeit posten kann, wird das frühe Aufwachen des Tages erreicht. Darüber hinaus sollte beachtet werden "Die Ziel-Weckzeit ist 07:00 Uhr, und ich habe um 1:00 Uhr um Mitternacht gepostet." Und so weiter, Benutzer hat zu früh gepostet Selbst in einigen Fällen ist es so eingestellt, dass es nicht frühzeitig erreicht wird. Als Mechanismus wird der Wert von "range_of_success" in der ** Benutzertabelle ** verwendet. das ist, "Wie viele Stunden vor der gewünschten Weckzeit sollte angegeben werden, um ein frühes Aufwachen zu erreichen, ein ganzzahliger Wert, der den Bereich darstellt." ist. Der Standardwert ist beispielsweise "3", wenn die Ziel-Weckzeit 3 Stunden zuvor auf ** 07: 00 ** eingestellt ist Wenn Sie zwischen ** 04:00 und 07: 00 ** posten können, stehen Sie früh auf.

Wenn Sie auf diese Weise ein frühes Aufwachen erreichen können, wird das Datum des Erfolgsdatums als Verlauf im "Datum" der Tabelle "Leistungstage" ** aufgezeichnet. Beispiel) 2020-11-22 Die folgenden Funktionen werden unter Verwendung dieser Datumsdaten realisiert.

** ① Berechnen Sie die Anzahl der Tage, an denen Sie jeden Monat früh aufstehen müssen ** ** ② Ranking-Funktion unter Verwendung der Anzahl der Tage in ① **

Zuerst dachte ich darüber nach, früh aufzustehen ** weiter ** in der Rangliste der Anzahl der Tage, aber Unter dem Gesichtspunkt der Aufrechterhaltung der Benutzermotivation haben wir uns entschlossen, ** monatliche ** Tage des frühen Aufwachens ** zu erreichen.

Was ich schwer hatte

Ich hatte mit Fehlern in jedem Prozess von der Entwicklung bis zur Bereitstellung zu kämpfen, aber w, Hier sind einige der denkwürdigsten Punkte.

Was ich mit CircleCI schwer hatte

• Einstellungen von ** config.yml **, einer Konfigurationsdatei von CircleCI
• Verständnis des Ablaufs automatisierter Builds und Tests

Ich hatte beim Einrichten von config.yml viele Fehler. .. Insbesondere bei der Angabe von Befehlen und Pfaden ist es wichtig zu verstehen, wo die Wurzel des Pfads beginnt. Als Gegenmaßnahme, als der Test fehlschlug, versuchte ich, die Ursache zu beheben, indem ich mich SSH in den erstellten Container anmeldete und das Fehlerprotokoll überprüfte.

Referenzlink: Debuggen mit SSH

Schwierigkeiten bei der AWS-Bereitstellung

• Ausstellung eines SSL-Zertifikats mit ACM
• Einstellungen zum Hochladen von Bildern in S3 mit Laravel
• Einstellungen für die automatische Bereitstellung in CodeDeploy (insbesondere appspec.yml)
• Einrichtung der EC2-Instanz

Wie oben erwähnt, [SSL-Zertifikat ausstellen](#### SSL-Zertifikat ausstellen) [In S3-Bucket hochladen](#### In S3-Bucket hochladen) Ich neigte dazu, mich auf Fehler um mich herum einzulassen. Auch dieses Mal habe ich mich für die Bereitstellung mit EC2 anstelle von ECS entschieden, aber nach der SSH-Anmeldung bei EC2 Es mussten viele Dateien installiert und konfiguriert werden, und die Arbeit um sie herum war schwierig. In Anbetracht dieses Prozesses wollte ich immer mehr mit ECS umgehen können ^^;

Womit ich am vorderen Ende zu kämpfen hatte

• UI / UX-Anpassung (Sass)
• Ajax im Allgemeinen

Kämpfe am hinteren Ende

• DB-Design
• DB-Beziehungsverarbeitung
• Allgemeine Tests mit PHPUnit

Anfangs hatte ich Schwierigkeiten mit den Beziehungen. Welche Tabelle ist welcher Tabelle zugeordnet und wie erhält man die zugehörigen Informationen? Ebenfalls,

• $article->user()
• $article->user

Ich hatte zum Beispiel das Gefühl, dass der Unterschied zwischen den beiden auch ein wichtiger Punkt ist.

In Bezug auf den PHPUnit-Testcode fiel es mir schwer, Informationen zu sammeln, da ich keine Informationen finden konnte, die systematisch gelernt werden konnten.

Schwierigkeiten beim Verknüpfen mit der Zoom-API

• Guzzle verstehen
• Grundlegendes zur Zoom-API

Ich habe beschlossen, eine Funktion zum Erstellen und Bearbeiten von Zoom-Besprechungen über die App hinzuzufügen. Da ich noch nie zuvor eine externe API verwendet hatte, fiel es mir schwer, die grammatikalischen Aspekte und den Mechanismus der API-Kommunikation zu verstehen.

Für die Implementierung ist es ein PHP-HTTP-Client, der mit der Zoom-API in Laravel kommuniziert. Ich habe ** Guzzle ** installiert.

Referenzlink:

• Guzzle 7 Official Document (Englisch)
• Ich habe versucht, Guzzle, den heutigen PHP-HTTP-Client, zu verwenden

Registrieren Sie als Nächstes die App auf Zoom App Marketplace und lesen Sie das offizielle Dokument. Welche Seite sollte ich zu Beginn des Englischen lesen? Ich hatte es schwer, ohne es zu wissen. .. ^^;

Laravel führt Beispielcode für die Verarbeitung ein, der mit der Zoom-API kommuniziert. Während ich mich auf Artikel aus Übersee bezog, fand ich nach und nach die notwendigen Informationen aus den offiziellen Dokumenten.

Referenzlink:

• ZoomAPI Official Document (Englisch)
• Manage Zoom Meeting Rooms through Zoom API with Laravel

Da ich diesmal eine App für die Laravel 6-Serie entwickelte, hatte ich Schwierigkeiten, da ich den Guzzle-Wrapper, der normalerweise für die Laravel 7-Serie verwendet werden kann, nicht verwenden konnte und den Code ein wenig umschreiben musste.

Referenzierte Lernmaterialien usw.

Grundsätzlich habe ich mit ** Udemy ** und ** Techpit ** gelernt. Diese beiden sind sehr leicht zu verstehen. Persönlich war ich der Meinung, dass es besser wäre, die Grundlagen bei Udemy zu lernen und dann mit Techpit als fortgeschrittener Version die Hände zu bewegen.

Docker / docker-compose

• [Udemy] Docker-Kurs, der von US-KI-Entwicklern von Grund auf unterrichtet wird

PHPUnit / CircleCI / AWS

• [Techpit] Laravel x CircleCI x CI / CD von AWS gelernt

AWS

• [Udemy] AWS: Amazon Web Services wurden von Grund auf neu geübt. Lernen Sie die Grundlagen der Infrastruktur, während Sie Ihre Hände bewegen.
• [Udemy] Das ist alles was du brauchst! Durchbruchkurs für AWS Certified Solution Architect-Associate-Prüfungen (SAA-C02 Exam Compatible Version)
• [[Buch] Netzwerk- und Serverkonstruktion aus den Grundlagen der überarbeiteten 3. Ausgabe von Amazon Web Services](https://www.amazon.co.jp/Amazon-Web-Services-%E5%9F%BA%E7%A4%8E % E3% 81% 8B% E3% 82% 89% E3% 81% AE% E3% 83% 8D% E3% 83% 83% E3% 83% 88% E3% 83% AF% E3% 83% BC% E3 % 82% AF% EF% BC% 86% E3% 82% B5% E3% 83% BC% E3% 83% 90% E3% 83% BC% E6% A7% 8B% E7% AF% 89-% E6% 94% B9% E8% A8% 823% E7% 89% 88-% E5% A4% A7% E6% BE% A4-ebook / dp / B084QQ7TCF / ref = sr_1_2? __ mk_ja_JP =% E3% 82% AB% E3% 82% BF% E3% 82% AB% E3% 83% 8A & dchild = 1 & keywords = aws & qid = 1606093752 & sr = 8-2)

Laravel

• [Udemy] Lassen Sie uns alles von PHP bis Laravel auf der Serverseite tun [Von Anfängern bis Anfängern] [Schwerpunkt auf Verständlichkeit]

Laravel / Vue.js

• [Techpit] Erstellen wir mit Laravel (+ Vue.js) einen SNS-ähnlichen Webdienst!

Sass

• [Udemy] CSS effizient schreiben! "Sass" -Kurs für Front-End-Ingenieure ~ Von den Grundlagen zur Praxis ~

Zukünftige Aufgaben

• Responsive Webdesign (Smartphone-kompatibel)
• Verbesserung des Designs
• Ein Fehler beim unendlichen Scrollen wurde behoben (die Schaltfläche "Gefällt mir" für geladene Beiträge verschwindet).
• Auto Scaling wurde zu ALB hinzugefügt, um EC2 redundant zu machen
• Bereitstellen mit ECS (EKS)
• RDS-Redundanz
• Infrastrukturcodierung
• Hinzufügen einer Suchfunktion
• Anreicherung des Testcodes
• Lassen Sie das Eingabeformular modal anzeigen, anstatt beim Posten zu einem anderen Bildschirm zu wechseln
• Sortierfunktion für Zoom-Besprechung vor Beginn und Ende der Besprechung

Es gibt noch viele Probleme, aber ich möchte sie einzeln verbessern und auffrischen.

Es war ein langer Artikel, aber danke, dass Sie so weit gelesen haben! ^^