Einführung

In letzter Zeit sehe ich häufig Artikel wie Qiita und IT-Artikel, die von Erstellern erstellt wurden. Als ich das Portfolio sah, das ich tatsächlich erstellt hatte, hatte ich das Gefühl, dass mein Hintergrund, meine Fähigkeiten und meine Leistungen mit einem wunderbaren Design auf der Website veröffentlicht wurden und dass ich die Welt fest ansprach. Also habe ich beschlossen, selbst ein Portfolio zu erstellen und sofort angefangen, aber ich habe das Wichtige vergessen.

** Ich habe noch nie ein Frontend gemacht ... **

Wenn ich auf meine Arbeit zurückblicke, arbeite ich erst seit ungefähr 10 Jahren als SE serverseitig. Die Hauptrollen im Projekt sind DB-Erstellung / -Optimierung, serverseitige Programmierung, Bereitstellung von Webanwendungen und Betriebsverwaltung. Die meisten Frontends sind ausgelagert, daher können wir überhaupt nicht entwerfen. Ich benutze JQuery schon lange, damit ich alles auf einmal implementieren kann, aber ich habe CSS nur punktgenau berührt, und ein ausgeklügeltes Portfolio ist wieder ein Traum.

Obwohl das ** Portfolio etwas sein sollte, das meine Fähigkeiten zum Ausdruck bringt **, fragte ich mich, ob ich mich, der keine Designerfahrung hat, wirklich auf Design konzentrieren sollte.

Am Ende kam ich zu dem Schluss, dass "ich noch nie Design gemacht habe, daher brauche ich kein ausgeklügeltes Portfolio! Ich sollte vielmehr ein Portfolio erstellen, das die serverseitige Technologie anspricht!" Ich habe es gemacht.

Was wurde gemacht

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

Für die serverseitige Technologie denke ich, dass die Anmeldefunktion zuerst erforderlich ist, daher erstelle ich ein Portfolio vom Typ Anmeldung. ** Sie können sich mit der folgenden ID und dem folgenden Passwort anmelden. ** **.

Obwohl es aus Kostengründen auf GCP veröffentlicht wird, verwenden wir einen Maschinentyp mit Regionen in Übersee und niedrigen Spezifikationen. Bitte beachten Sie, dass der DB-Zugriff usw. verspätet ist.

ID：user
PW：user

Konzeptplan

Zuerst dachte ich über die Funktionen nach, die ich in das Portfolio aufnehmen wollte, und listete sie auf.

Ich möchte die beliebte "Vue.js" am Frontend verwenden ――Ich möchte es zu einem beliebten SPA (Single Page Application) machen. ――Ich möchte ein ansprechendes Design haben
Die Serverseite möchte den bekannten Spring Boot verwenden
Ich möchte die Sicherheit stärken
Ich möchte es zu einer RESTful API machen
Ich möchte eine Webanwendung mit Docker bereitstellen
Ich möchte einen Reverse-Proxy verwenden
Das Aussehen ist minimal

Ich dachte, wenn das Portfolio die oben genannten Funktionen hätte, wäre dies ein Beweis für meine Fähigkeiten, also kam ich auf diese Idee.

Was ich eigentlich benutzt habe

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

Es ist keine Zeit, es im Detail anzusprechen, aber der Umriss ist oben. Die Version usw. wird bei der Veröffentlichung detaillierter Artikel in der Zukunft beschrieben.

Über Design

Wie eingangs erwähnt, kann ich mich nicht selbst entwerfen, daher habe ich eine kostenlose Vorlage ausgewählt. Ich habe hier nach der Vorlage gesucht. [creative-tim][2] [2]:https://www.creative-tim.com/ [ferret][3] [3]:https://ferret-plus.com/8517

Funktionen, die implementiert werden könnten

Vorderes Ende

SPA (Single Page Application) --https (SSL-kompatibel) --Sich anpassendes Design ――Verwendung cooler Vorlagen → Es war auch ohne Designkenntnisse recht gut

Backend

Anmeldefunktion zum Durchsuchen der Datenbank --CORS-Maßnahmen (Cross-Origin Resource Sharing)
Gegenmaßnahmen des CSRF (Cross-Site Request for Geries)
Kontrollierte APIs und Anzeigemenüs, die von Benutzerrechten ausgeführt werden können
RESTful API

Infrastruktur

Bereitstellen einer Webanwendung mit Docker
Veröffentlichung auf GCP
Proxy-Einstellungen umkehren

Es ist zu einer Betriebsumgebung geworden, die als gewöhnlicher Webdienst freigegeben werden kann.

Wenn Sie die Spezifikationen von GCP erhöhen ...

Verfahren zum Freigeben

Erstellen Sie ein Frontend mit Vue.js und erstellen Sie es mit Webpack.
Integrieren Sie das Front-End-Modul in das Back-End und bauen Sie es mit Gradle.
Erstellen Sie die fertige JAR-Datei mit Dockerfile. (Der Build selbst wurde Docker-Hub überlassen)
Stellen Sie beim Erstellen von GCE das Container-Image so ein, dass es auf Docker-Hub verweist, und geben Sie es frei.
Verwenden Sie Nginx als Reverse-Proxy und legen Sie die Portweiterleitung fest

Die Domain wurde von Name.com und das Serverzertifikat von Let's Encrypt erworben.

Soweit vorerst

Die verwendete Technologie wird in Zukunft einzeln als Artikel von Qiita aufgegriffen und veröffentlicht. Ich werde auf Anfrage über git-hub posten.

[GO] Eine Geschichte über einen Ingenieur, der nur auf der Serverseite kam, erstellte ein Portfolio