🔨 Adicionando docker compose na demo

vcampitelli · Oct 7, 2023 · fd1266e · fd1266e
1 parent 81658e5
commit fd1266e
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 40 deletions.
diff --git a/demo/backend/Dockerfile b/demo/backend/Dockerfile
@@ -0,0 +1,12 @@
+FROM php:8.2-cli-alpine
+
+WORKDIR /app
+
+COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
+
+COPY ["composer.json", "composer.lock", "./"]
+RUN composer install --no-dev
+
+COPY . .
+
+CMD composer start
diff --git a/demo/backend/composer.json b/demo/backend/composer.json
@@ -38,6 +38,6 @@
         }
     },
     "scripts": {
-        "start": "php -S localhost:8080 -t public"
+        "start": "php -S 0.0.0.0:8080 -t public"
     }
 }
diff --git a/demo/docker-compose.yml b/demo/docker-compose.yml
@@ -0,0 +1,24 @@
+services:
+    frontend:
+        build:
+            context: ./frontend
+        volumes:
+            - ./frontend:/app
+            - frontendModules:/app/node_modules
+        ports:
+            - "5173:5173"
+
+    backend:
+        build:
+            context: ./backend
+        volumes:
+            - ./backend:/app
+            - backendVendor:/app/vendor
+        environment:
+            APP_RP_ID: localhost
+        ports:
+            - "8080:8080"
+
+volumes:
+    frontendModules:
+    backendVendor:
diff --git a/demo/frontend/Dockerfile b/demo/frontend/Dockerfile
@@ -0,0 +1,10 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY ["package.json", "package-lock.json", "./"]
+RUN npm install
+
+COPY . .
+
+CMD npm run dev
diff --git a/demo/frontend/package.json b/demo/frontend/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "vite build",
     "preview": "vite preview"
   },

diff --git a/demo/frontend/src/app.jsx b/demo/frontend/src/app.jsx
@@ -32,28 +32,23 @@ export function App() {
 
     return (
         <>
-            <div>
-                <h1>Demonstração de WebAuthn</h1>
-                <div>
-                    <a href="https://viniciuscampitelli.com">Vinícius Campitelli</a>
-                </div>
-                {(user) ? null : (
-                    <div className="form">
-                        <input type="text" placeholder="Seu nome de usuário" value={username}
-                               onChange={e => setUsername(e.target.value.replaceAll(/[^a-zA-Z0-9_-]+/g, '-'))}/>
-                        <div className="d-flex">
-                            <button type="button"
-                                    onClick={() => signin(username, setError, handleSuccess, handleError)}>
-                                Entrar
-                            </button>
-                            <button type="button"
-                                    onClick={() => signup(username, setError, handleSuccess, handleError)}>
-                                Cadastrar
-                            </button>
-                        </div>
+            <h1>Demonstração de WebAuthn</h1>
+            {(user) ? null : (
+                <div className="form">
+                    <input type="text" placeholder="Seu nome de usuário" value={username}
+                           onChange={e => setUsername(e.target.value.replaceAll(/[^a-zA-Z0-9_-]+/g, '-'))}/>
+                    <div className="d-flex">
+                        <button type="button"
+                                onClick={() => signin(username, setError, handleSuccess, handleError)}>
+                            Entrar
+                        </button>
+                        <button type="button"
+                                onClick={() => signup(username, setError, handleSuccess, handleError)}>
+                            Cadastrar
+                        </button>
                     </div>
-                )}
-            </div>
+                </div>
+            )}
             {(user) ? (
                 <div>
                     <h2>Bem-vindo, {user.displayName}</h2>
@@ -65,6 +60,10 @@ export function App() {
                     <pre>{JSON.stringify(error, null, 2)}</pre>
                 </div>
             ) : null)}
+            <footer>
+                <a href="https://viniciuscampitelli.com/slides-webauthn">Slides</a>
+                <p>Por <a href="https://viniciuscampitelli.com">Vinícius Campitelli</a></p>
+            </footer>
         </>
     );
 }
diff --git a/demo/frontend/src/index.css b/demo/frontend/src/index.css
@@ -31,7 +31,7 @@ body {
 }
 
 h1 {
-  margin: 0 0 0.25em;
+  margin: 0 0 1.5em;
   font-size: 3.2em;
   line-height: 1.1;
 }
@@ -95,8 +95,15 @@ input:focus {
   max-width: 300px;
   margin: 0 auto;
 }
-h1 + div {
-  margin-bottom: 5em;
+footer {
+  margin-top: 5em;
+  padding-top: 1em;
+  border-top: 1px #444 solid;
+  display: flex;
+  justify-content: space-between;
+}
+p {
+  margin: 0;
 }
 
 .d-flex {

diff --git a/docs/index.html b/docs/index.html
@@ -785,27 +785,17 @@ <h1>Demo</h1>
                         <h1>Demo</h1>
                         <p>Se quiser executar localmente:</p>
                         <ul>
-                            <li>
-                                Instale o <a href="https://github.com/FiloSottile/mkcert" target="_blank"
-                                             rel="noopener">mkcert</a> ou use a própria <a
-                                    href="https://www.openssl.org/" target="_blank" rel="noopener">OpenSSL</a> para
-                                criar uma CA e gerar um certificado SSL para seu site local
-                            </li>
-                            <li>Adicione uma entrada no <code>/etc/hosts</code> para <code>webauthn.local</code></li>
                             <li>Clone este repositório e entre na pasta <code>demo</code></li>
+                            <li>Inicialize os <em>containers</em></li>
                             <li>
-                                Acesse a aplicação em <a href="https://webauthn.local:8080" target="_blank"
-                                                         rel="noopener">webauthn.local:8080</a>
+                                Acesse a aplicação em <a href="https://localhost:5173" target="_blank"
+                                                         rel="noopener">localhost:5173</a>
                             </li>
                         </ul>
                         <pre><code class="shell" data-trim>
                             $ git clone --recursive git@github.com:vcampitelli/slides-webauthn.git
                             $ cd demo
-                            $ npm run mkcert
-                            $ echo "127.0.0.1 webauthn.local" | sudo tee -a /etc/hosts
-                            $ npm install
-                            $ npm run build
-                            $ npm run serve
+                            $ docker compose up -d
                         </code></pre>
                     </section>
                 </section> <!-- Demo -->