introduction

Récemment, je vois souvent des articles tels que Qiita et des articles informatiques que les créateurs ont créé des portefeuilles. Quand j'ai vu le portfolio que j'ai réellement créé, j'ai senti que mes antécédents, mes compétences et mes livrables étaient affichés sur le site avec un design merveilleux et que j'étais fermement attiré par le monde. J'ai donc décidé de créer moi-même un portfolio et j'ai commencé immédiatement, mais j'ai oublié l'important.

** Je n'ai jamais fait de frontal ... **

En repensant à mon travail, je ne fais du travail côté serveur que depuis environ 10 ans en tant que SE. Les rôles principaux dans le projet sont la construction / le réglage de la base de données, la programmation côté serveur, le déploiement d'applications Web et la gestion des opérations. La plupart des frontaux sont externalisés, nous ne pouvons donc pas du tout concevoir. J'utilise JQuery depuis longtemps, donc je peux tout mettre en œuvre en même temps, mais je n'ai touché css qu'avec des points précis, et un portefeuille élaboré est à nouveau un rêve.

Cependant, même si le ** portfolio devrait être quelque chose qui exprime mes compétences **, je me suis demandé si moi, qui n'ai aucune expérience en design, devrais vraiment mettre l'accent sur le design.

En fin de compte, je suis arrivé à la conclusion que "je n'ai jamais fait de conception en premier lieu, donc je n'ai pas besoin d'un portefeuille élaboré! Je devrais plutôt créer un portefeuille qui peut faire appel à la technologie côté serveur!" Je l'ai fait.

Ce qui a été fait

[wakaba-bbq's Portfolio][1] [1]:https://wakaba-bbq.com/login

Pour la technologie côté serveur, je pense que la fonction de connexion est d'abord nécessaire, donc je crée un portefeuille de type connexion. ** Vous pouvez vous connecter avec l'ID et le mot de passe suivants. ** **

Bien qu'il soit publié sur GCP, pour des raisons de coût, nous utilisons un type de machine avec des régions d'outre-mer et des spécifications faibles. Veuillez noter que l'accès à la base de données, etc. est en retard.

ID：user
PW：user

Plan conceptuel

J'ai d'abord réfléchi aux fonctions que je souhaitais mettre dans le portfolio et je les ai listées.

Je veux utiliser le populaire "Vue.js" sur le front-end ――Je veux en faire un SPA (application à page unique) populaire ――Je veux avoir un design réactif
Le côté serveur veut utiliser le Spring Boot familier --Je veux renforcer la sécurité --Je veux en faire une API RESTful --Je souhaite déployer une application Web avec Docker --Je souhaite utiliser un proxy inverse
L'apparence est minime

Je pensais que si le portfolio avait les fonctions ci-dessus, ce serait une preuve de mes compétences, alors j'ai eu cette idée.

Ce que j'ai réellement utilisé

Vue.js
Webpack
Spring Boot
Spring Security
Gradle
MySql
Docker
Nginx

Il n'y a pas le temps de le soulever en détail, mais le contour est au-dessus. La version etc. sera décrite lors de la publication d'articles détaillés à l'avenir.

À propos du design

Comme je l'ai mentionné au début, je ne peux pas concevoir moi-même, j'ai donc choisi un modèle gratuit. J'ai cherché le modèle ici. [creative-tim][2] [2]:https://www.creative-tim.com/ [ferret][3] [3]:https://ferret-plus.com/8517

Fonctions qui pourraient être implémentées

l'extrémité avant

SPA (Single Page Application) --https (compatible SSL)
Conception adaptative ――Utilisation de modèles sympas → C'était assez bon même sans aucune compétence en conception

Back end

--Fonction de connexion pour parcourir la base de données

Mesures CORS (Cross-Origin Resource Sharing) --Contre-mesures CSRF (requête intersite pour geries)
API contrôlées et menus d'affichage qui peuvent être exécutés par les privilèges de l'utilisateur
RESTful API

Infrastructure

--Déploiement d'une application Web à l'aide de Docker --Relâchez sur GCP

Paramètres de proxy inversés

C'est devenu un environnement d'exploitation qui peut être publié en tant que service Web ordinaire.

Si vous augmentez les spécifications de GCP ...

Procédure de libération

Créez un frontal avec Vue.js et construisez-le avec Webpack.
Incorporez le module frontal à l'arrière et construisez avec gradle.
Générez le fichier jar terminé à l'aide de Dockerfile. (La construction elle-même a été laissée à docker-hub)
Lors de la création de GCE, définissez l'image du conteneur pour qu'elle fasse référence à docker-hub et libérez-la.
Utilisez Nginx comme proxy inverse et définissez la redirection de port

Le domaine a été acquis par Name.com et le certificat de serveur a été acquis par Let's Encrypt.

Jusqu'ici pour le moment

La technologie utilisée sera reprise et publiée une par une sous forme d'article de Qiita à l'avenir. Je publierai sur git-hub si demandé.

[GO] Une histoire sur un ingénieur venu uniquement du côté serveur a créé un portfolio