Dans cet article, les points sur lesquels j'ai eu du mal à développer l'application, Je voudrais présenter les articles et le matériel pédagogique auxquels j'ai fait référence lors de la mise en œuvre de chaque fonction.

Aperçu de l'application

C'est une application SNS avec le thème des activités matinales.

• Vous pouvez faire des activités matinales et continuer "régulièrement"
• Partagez le «talent» des activités du matin pour éviter la frustration des activités du matin

Sur la base de ce concept, nous avons développé un service appelé ** "Asa Kotsu" ** avec le mot "activité matinale". L'URL est ici ↓. Si vous le souhaitez, n'hésitez pas à le déplacer ^^

URL de l'application: https://pf.asakotsu.com/ (* La prise en charge des smartphones n'étant pas encore terminée, il est recommandé de naviguer sur un PC ^^;)

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

Image de l'écran d'utilisation

Première page (liste des publications et classement, etc.)

Liste des articles par tag

Détails de l'article et liste de commentaires

Zoomer la liste des réunions

Écran des détails de l'utilisateur

Au lever tôt

DEFILEMENT infini

Caractéristiques de cette application

Fondamentalement, c'est un SNS avec des messages, des commentaires, des likes et des fonctions comme Twitter, De plus, c'est une application avec les fonctionnalités suivantes.

• Vous pouvez créer, modifier et supprimer l'activité du matin des réunions Zoom à partir de l'application (intégration de l'API Zoom)
• Vous pouvez définir une heure de réveil cible et enregistrer le nombre de jours de réveil précoce.
• Fonction de classement pour le nombre de jours pour se lever tôt (agrégé mensuellement)
• Vous pouvez baliser les articles (catégorie) et partager des astuces d'activités matinales avec des balises «astuces matinales», etc.

Technologie utilisée

• l'extrémité avant

• 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)

• Infrastructure

• 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 )

La logique côté serveur est programmée en PHP / Laravel La conception détaillée du front-end a été arrangée avec Sass, et quand j'ai voulu ajouter du mouvement, je l'ai implémentée avec Vue.js et jQuery. Utilisez Docker / docker-compose pour l'environnement de développement Pour le pipeline CI / CD, nous avons réalisé un test automatisé avec CircleCI J'essaie de réaliser un déploiement automatique avec CodeDeploy d'AWS.

Diagramme de configuration d'infrastructure

À propos de l'environnement de développement et de l'environnement de production

J'utilise Docker / docker-compose pour l'environnement de développement, et j'utilise des conteneurs aux quatre fins suivantes.

1. Conteneur de serveur Web: Nginx
2. Conteneur d'application: PHP / Laravel / Vue.js
3. Conteneur de base de données: MySQL
4. Conteneur pour la gestion de la base de données: PHPMyAdmin

Lien de référence:

• [Comment créer un environnement d'exécution Laravel + Vue (environnement LEMP) avec Docker qui n'échoue jamais ~ Partie 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)

• Comment créer un environnement d'exécution Laravel 6.8 + Vue (environnement LEMP) avec Docker qui n'échoue jamais ~ Partie 2 ~

• phpMyAdmin sur le docker est trop pratique

Je voulais déployer avec ECS sur AWS dans l'environnement de production, Abandonné en raison d'une difficulté élevée ... Pour le moment, je me suis habitué à l'expérience de déploiement sur EC2, donc cette fois j'ai procédé en construisant un environnement sur EC2.

Émission d'un certificat SSL

J'utilise ACM (AWS Certificate Manager) parce que je voulais émettre un certificat SSL et réaliser une conversion HTTPS.

En plus d'EC2, ALB (ELB) et CloudFront sont également nécessaires pour utiliser ACM, j'ai donc décidé d'introduire ALB cette fois. Bien qu'ALB soit utilisé, ~~ pour économiser de l'argent ~~ À l'heure actuelle, on ne s'attend pas à ce qu'il ait suffisamment d'accès pour distribuer la charge ou augmenter la charge, donc une seule instance EC2 est préparée. De plus, même s'il y a une marque de verrouillage sur la barre d'adresse, les fichiers css et js ne seront pas lus ou le routage ne sera pas converti en https à moins que vous ne définissiez le proxy côté Laravel, alors soyez prudent. ..

Lien de référence:

• AWS: Comment obtenir un certificat SSL gratuitement
• Paramètres du proxy de confiance

Télécharger dans le compartiment S3

S3 est préparé pour les deux objectifs suivants.

1. Stockez la source créée avec CircleCI

2. Stockez les données d'image téléchargées par l'application sur EC2

Concernant 2, il y avait quelque chose d'inattendu à faire, comme la définition de la politique de compartiment de S3 et l'installation du package pour S3 du côté Laravel.

Lien de référence:

• AWS (IAM: User, S3: Bucket) Settings for Rails, Laravel (Image Upload)
• Télécharger des images sur AWS S3 avec Laravel

Paramètres de notification pour Slack

En liant «CodeDeploy» à «SNS» et «Chatbot», les notifications sont envoyées au compte Slack au début et à la fin du déploiement automatique. Très pratique.

Liste des fonctions

• __ Lié à l'inscription de l'utilisateur __

• Nouvelle inscription, fonction d'édition de profil

• Fonctions de connexion et de déconnexion

• Fonction de connexion facile (connexion de l'utilisateur invité)

• __ Intégration de l'API Zoom __

• Activité du matin Fonction de réunion Zoom (CRUD)

• Nouvelle réunion, liste, modification, fonction de suppression

• __ Fonction de jugement pour obtenir une augmentation précoce __

• L'heure de réveil cible peut être définie pour chaque utilisateur (de 4h00 à 10h00)

• Si vous pouvez publier avant l'heure de réveil cible, le record de réussite du réveil précoce augmentera d'un jour.
  

• • Si vous postez après minuit, vous ne pourrez pas vous lever tôt et réussir.
    Même si vous postez 3 heures avant l'heure de réveil cible, celle-ci sera invalide.
    (Exemple) Si l'heure de réveil cible est définie sur 07h00, si vous pouvez publier de 04h00 à 07h00, vous vous lèverez tôt.

• __ Fonction de classement des réalisations au réveil précoce de l'utilisateur (tous les mois) __

• __ Fonction de défilement infini __ (jQuery / inview.js / ajax)

• __ Lié aux messages de l'utilisateur (CRUD) __

• __ Fonction de commentaire __

• __ Fonction de balise __ (Entrée Vue.js / Vue Tags)

• __ Comme la fonction __ (Vue.js / ajax)

• __ Suivez la fonction __

• Liste des abonnés / suiveurs (page nation)

• __ Fonction d'affichage de message flash __ (jQuery / Toastr)

• Afficher des messages flash lors de la publication, de la modification, de la suppression, de la connexion et de la déconnexion

• __ Fonction de téléchargement d'image __ (compartiment AWS S3)

• __PHPUnit test __

Conception DB

Diagramme ER

À propos de chaque table

Points liés à la fonction de réalisation du réveil précoce

Le wake_up_time dans la ** table users ** signifie ** l'heure de réveil cible ** de l'utilisateur. Si l'utilisateur peut publier plus tôt que cette heure, le réveil précoce de la journée sera atteint. De plus, il convient de noter "L'heure de réveil cible est 07h00, et j'ai posté à 01h00 à minuit." Et ainsi de suite, l'utilisateur a posté trop tôt Même dans certains cas, il est réglé de manière à ne pas être réalisé tôt. En tant que mécanisme, la valeur de range_of_success dans la ** table des utilisateurs ** est utilisée. c'est, "Combien d'heures avant l'heure de réveil cible doivent être affichées pour obtenir un réveil anticipé, un entier représentant la plage" est. La valeur par défaut est «3», par exemple, si l'heure de réveil cible est définie sur ** 07: 00 **, 3 heures avant Si vous pouvez poster entre ** 04h00 et 07h00 **, vous vous lèverez tôt.

Si vous parvenez à vous réveiller tôt de cette manière, la date de la date de réussite sera enregistrée comme historique dans date de la table ** achievement_days **. Exemple) 2020-11-22 Les fonctions suivantes sont réalisées en utilisant ces données de date.

** ① Calculez le nombre de jours pour vous lever tôt chaque mois ** ** ② Fonction de classement en utilisant le nombre de jours en ① **

Au début, je pensais me lever tôt ** en continuant ** dans le classement du nombre de jours, mais Dans l'optique de maintenir la motivation des utilisateurs, nous avons décidé d'adopter des jours ** mensuels ** de réveil précoce ** de réalisation **.

Ce que j'ai eu du mal

J'ai eu du mal avec des erreurs dans chaque processus, du développement au déploiement, mais w, Voici quelques-uns des points les plus mémorables.

Ce que j'ai eu du mal avec CircleCI

• Paramètres de ** config.yml **, qui est un fichier de configuration de CircleCI
• Comprendre le flux des builds et des tests automatisés

Je souffrais de beaucoup d'erreurs lors de la configuration de config.yml. .. Surtout lorsque vous spécifiez des commandes et des chemins, il est important de comprendre où commence la racine du chemin. En guise de contre-mesure lorsque le test a échoué, j'ai essayé de résoudre la cause en me connectant SSH dans le conteneur intégré et en vérifiant le journal des erreurs.

Lien de référence: Debug using SSH

Difficultés de déploiement AWS

• Émission d'un certificat SSL avec ACM
• Paramètres de téléchargement d'images sur S3 avec Laravel
• Paramètres de déploiement automatique dans CodeDeploy (en particulier appspec.yml)
• Configuration de l'instance EC2

Comme mentionné ci-dessus, [Émission d'un certificat SSL](#### Émission d'un certificat SSL) [Télécharger dans le compartiment S3](#### Télécharger dans le compartiment S3) J'avais tendance à devenir accro aux erreurs autour de moi. De plus, cette fois, j'ai décidé de déployer avec EC2 au lieu d'ECS, mais après la connexion SSH à EC2 Il y avait de nombreux fichiers à installer et à configurer, et le travail autour d'eux était difficile. Compte tenu de ce processus, je voulais être capable de gérer de plus en plus ECS ^^;

Ce avec quoi j'ai eu du mal à l'avant

• Réglage UI / UX (Sass)
• Ajax en général

Lutte à l'arrière

• Conception DB
• Traitement lié à la relation DB
• Test général avec PHPUnit

Au début, j'ai eu du mal avec les relations. Quelle table est associée à quelle table et comment obtenir les informations associées? Aussi,

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

Par exemple, j'ai senti que la différence entre les deux était également un point important.

Concernant le code de test PHPUnit, j'ai eu du mal à collecter des informations car je ne trouvais aucune information qui pouvait être apprise systématiquement.

Difficultés de liaison avec l'API Zoom

• Comprendre Guzzle
• Comprendre l'API Zoom

J'ai décidé d'ajouter une fonction pour créer et modifier des réunions Zoom depuis l'application, Comme je n'avais jamais utilisé d'API externe auparavant, j'avais du mal à comprendre les choses grammaticales et le mécanisme de communication API.

En implémentation, c'est un client PHP HTTP pour communiquer avec l'API Zoom dans Laravel. J'ai installé ** Guzzle **.

Lien de référence:

• Document officiel de Guzzle 7 (anglais)
• J'ai essayé d'utiliser Guzzle, le client HTTP PHP d'aujourd'hui

Ensuite, enregistrez l'application sur Zoom App Marketplace et lisez le document officiel, mais en anglais, quelle page dois-je consulter au début? J'ai eu du mal sans le savoir. .. ^^;

Laravel présente un exemple de code pour le traitement qui communique avec l'API Zoom. En me référant à des articles d'outre-mer, j'ai progressivement pu trouver les informations nécessaires dans les documents officiels.

Lien de référence:

• Document officiel ZoomAPI (anglais)
• Manage Zoom Meeting Rooms through Zoom API with Laravel

Cependant, comme je développais cette fois une application sur la série Laravel 6, j'ai eu du mal car je ne pouvais pas utiliser le wrapper Guzzle qui peut normalement être utilisé sur la série Laravel 7, et j'ai dû réécrire un peu le code.

Matériel d'apprentissage référencé, etc.

En gros, j'ai appris avec ** Udemy ** et ** Techpit **. Ces deux sont très faciles à comprendre. Personnellement, j'ai pensé qu'il valait mieux apprendre les bases chez Udemy et ensuite bouger les mains avec Techpit en version avancée.

Docker / docker-compose

• [Udemy] Cours Docker enseigné par des développeurs IA américains à partir de zéro

PHPUnit / CircleCI / AWS

• [Techpit] Laravel x CircleCI x CI / CD appris d'AWS

AWS

• [Udemy] AWS: Amazon Web Services pratiqué à partir de zéro. Apprenez les bases de l'infrastructure en bougeant vos mains
• [Udemy] C'est tout ce dont vous avez besoin! Cours révolutionnaire de l'examen AWS Certified Solution Architect-Associate (version compatible avec l'examen SAA-C02)
• [[Book] Network & Server Construction from the Basics of Amazon Web Services Revised 3rd Edition](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] Faisons tout de PHP à Laravel côté serveur [Du débutant au débutant] [Accent sur la compréhensibilité]

Laravel / Vue.js

• [Techpit] Créons un service Web de type SNS avec Laravel (+ Vue.js)!

Sass

• [Udemy] Écrivez du CSS efficacement! Cours «Sass» pour les ingénieurs front-end ~ Des bases à la pratique ~

Tâches futures

• Conception Web réactive (compatible smartphone)
• Amélioration de la conception
• Correction d'un bug dans le défilement infini (le bouton similaire pour les articles chargés disparaît)
• Ajout de la mise à l'échelle automatique à ALB pour rendre EC2 redondant
• Déployer avec ECS (EKS)
• Redondance RDS
• Codage d'infrastructure
• Ajout de la fonction de recherche
• Enrichissement du code de test
• Faire afficher le formulaire de saisie de manière modale au lieu de passer à un autre écran lors de la publication
• Fonction de tri pour la réunion Zoom avant le début et la fin de la réunion

Il y a encore de nombreux problèmes, mais je voudrais les améliorer un par un et les rafraîchir.

Cela a été un long article, mais merci d'avoir lu jusqu'ici! ^^