|
358 | 358 | <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> |
359 | 359 |
|
360 | 360 | <li class="md-nav__item"> |
361 | | - <a href="#prepare-your-application" class="md-nav__link"> |
| 361 | + <a href="#1-build-your-images" class="md-nav__link"> |
362 | 362 | <span class="md-ellipsis"> |
363 | | - Prepare your Application |
| 363 | + 🧱 1. Build Your Images |
364 | 364 | </span> |
365 | 365 | </a> |
366 | 366 |
|
367 | 367 | </li> |
368 | 368 |
|
369 | 369 | <li class="md-nav__item"> |
370 | | - <a href="#deploy" class="md-nav__link"> |
| 370 | + <a href="#2-copy-to-server" class="md-nav__link"> |
371 | 371 | <span class="md-ellipsis"> |
372 | | - 📦 Deploy |
| 372 | + 📦 2. Copy to Server |
373 | 373 | </span> |
374 | 374 | </a> |
375 | 375 |
|
376 | | - <nav class="md-nav" aria-label="📦 Deploy"> |
| 376 | + <nav class="md-nav" aria-label="📦 2. Copy to Server"> |
377 | 377 | <ul class="md-nav__list"> |
378 | 378 |
|
379 | 379 | <li class="md-nav__item"> |
380 | | - <a href="#secrets" class="md-nav__link"> |
| 380 | + <a href="#3-set-secrets" class="md-nav__link"> |
381 | 381 | <span class="md-ellipsis"> |
382 | | - Secrets |
| 382 | + 3. Set Secrets |
383 | 383 | </span> |
384 | 384 | </a> |
385 | 385 |
|
|
391 | 391 | </li> |
392 | 392 |
|
393 | 393 | <li class="md-nav__item"> |
394 | | - <a href="#launch-your-stack" class="md-nav__link"> |
| 394 | + <a href="#launch-the-app" class="md-nav__link"> |
395 | 395 | <span class="md-ellipsis"> |
396 | | - 🚀 Launch your Stack |
| 396 | + 🚀 Launch the App |
397 | 397 | </span> |
398 | 398 | </a> |
399 | 399 |
|
400 | 400 | </li> |
401 | 401 |
|
402 | 402 | <li class="md-nav__item"> |
403 | | - <a href="#github-actions-workflow" class="md-nav__link"> |
| 403 | + <a href="#next-steps" class="md-nav__link"> |
404 | 404 | <span class="md-ellipsis"> |
405 | | - Github Actions Workflow |
406 | | - </span> |
407 | | - </a> |
408 | | - |
409 | | -</li> |
410 | | - |
411 | | - <li class="md-nav__item"> |
412 | | - <a href="#what-now" class="md-nav__link"> |
413 | | - <span class="md-ellipsis"> |
414 | | - ➕ What Now? |
| 405 | + 🧭 Next Steps |
415 | 406 | </span> |
416 | 407 | </a> |
417 | 408 |
|
|
452 | 443 | <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> |
453 | 444 |
|
454 | 445 | <li class="md-nav__item"> |
455 | | - <a href="#prepare-your-application" class="md-nav__link"> |
| 446 | + <a href="#1-build-your-images" class="md-nav__link"> |
456 | 447 | <span class="md-ellipsis"> |
457 | | - Prepare your Application |
| 448 | + 🧱 1. Build Your Images |
458 | 449 | </span> |
459 | 450 | </a> |
460 | 451 |
|
461 | 452 | </li> |
462 | 453 |
|
463 | 454 | <li class="md-nav__item"> |
464 | | - <a href="#deploy" class="md-nav__link"> |
| 455 | + <a href="#2-copy-to-server" class="md-nav__link"> |
465 | 456 | <span class="md-ellipsis"> |
466 | | - 📦 Deploy |
| 457 | + 📦 2. Copy to Server |
467 | 458 | </span> |
468 | 459 | </a> |
469 | 460 |
|
470 | | - <nav class="md-nav" aria-label="📦 Deploy"> |
| 461 | + <nav class="md-nav" aria-label="📦 2. Copy to Server"> |
471 | 462 | <ul class="md-nav__list"> |
472 | 463 |
|
473 | 464 | <li class="md-nav__item"> |
474 | | - <a href="#secrets" class="md-nav__link"> |
| 465 | + <a href="#3-set-secrets" class="md-nav__link"> |
475 | 466 | <span class="md-ellipsis"> |
476 | | - Secrets |
| 467 | + 3. Set Secrets |
477 | 468 | </span> |
478 | 469 | </a> |
479 | 470 |
|
|
485 | 476 | </li> |
486 | 477 |
|
487 | 478 | <li class="md-nav__item"> |
488 | | - <a href="#launch-your-stack" class="md-nav__link"> |
| 479 | + <a href="#launch-the-app" class="md-nav__link"> |
489 | 480 | <span class="md-ellipsis"> |
490 | | - 🚀 Launch your Stack |
| 481 | + 🚀 Launch the App |
491 | 482 | </span> |
492 | 483 | </a> |
493 | 484 |
|
494 | 485 | </li> |
495 | 486 |
|
496 | 487 | <li class="md-nav__item"> |
497 | | - <a href="#github-actions-workflow" class="md-nav__link"> |
| 488 | + <a href="#next-steps" class="md-nav__link"> |
498 | 489 | <span class="md-ellipsis"> |
499 | | - Github Actions Workflow |
500 | | - </span> |
501 | | - </a> |
502 | | - |
503 | | -</li> |
504 | | - |
505 | | - <li class="md-nav__item"> |
506 | | - <a href="#what-now" class="md-nav__link"> |
507 | | - <span class="md-ellipsis"> |
508 | | - ➕ What Now? |
| 490 | + 🧭 Next Steps |
509 | 491 | </span> |
510 | 492 | </a> |
511 | 493 |
|
@@ -534,49 +516,46 @@ <h1 id="deploying-to-remote-environments">☁️ Deploying to Remote Environment |
534 | 516 | <p>SuperStack is <strong>Docker-native</strong>, so deployments are simple, consistent, and |
535 | 517 | portable. The goal is that only <code>compose.yaml</code> and secrets need to exist on the |
536 | 518 | remote server.</p> |
537 | | -<h2 id="prepare-your-application">Prepare your Application</h2> |
538 | | -<p>Services that are built (they have a <code>build:</code> section in <code>compose.yaml</code>), add |
539 | | -your own container repository image URIs (e.g. your Docker Hub or GitHub |
540 | | -Container Registry account), for example:</p> |
| 519 | +<h2 id="1-build-your-images">🧱 1. Build Your Images</h2> |
| 520 | +<p>If a service has a <code>build:</code> section, add your own image name and version tag:</p> |
541 | 521 | <div class="highlight"><span class="filename">compose.yaml</span><pre><span></span><code><span class="nt">services</span><span class="p">:</span> |
542 | 522 | <span class="w"> </span><span class="nt">caddy</span><span class="p">:</span> |
543 | 523 | <span class="w"> </span><span class="nt">build</span><span class="p">:</span> |
544 | 524 | <span class="w"> </span><span class="nt">context</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">./caddy</span> |
545 | | -<span class="w"> </span><span class="nt">image</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">ghcr.io/youruser/yourapp-caddy:0.1.0</span> |
546 | | -</code></pre></div> |
| 525 | +<span class="hll"><span class="w"> </span><span class="nt">image</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">ghcr.io/youruser/yourapp-caddy:0.1.0</span> |
| 526 | +</span></code></pre></div> |
547 | 527 | <p>Build and push your images:</p> |
548 | 528 | <div class="highlight"><pre><span></span><code>docker<span class="w"> </span>compose<span class="w"> </span>build |
549 | 529 | docker<span class="w"> </span>compose<span class="w"> </span>push |
550 | 530 | </code></pre></div> |
551 | | -<h2 id="deploy">📦 Deploy</h2> |
552 | | -<p>Copy <code>compose.yaml</code> to the server:</p> |
| 531 | +<h2 id="2-copy-to-server">📦 2. Copy to Server</h2> |
| 532 | +<p>Copy your <code>compose.yaml</code> to the remote host:</p> |
553 | 533 | <div class="highlight"><pre><span></span><code>scp<span class="w"> </span>compose.yaml<span class="w"> </span>youruser@yourserver: |
554 | 534 | </code></pre></div> |
555 | | -<h3 id="secrets">Secrets</h3> |
556 | | -<p>The app also needs your secrets (passwords, keys, etc.).</p> |
557 | | -<p>There are a few options:</p> |
| 535 | +<h3 id="3-set-secrets">3. Set Secrets</h3> |
| 536 | +<p>Your app will need credentials such as database passwords or API keys. |
| 537 | +Choose one of these approaches:</p> |
558 | 538 | <ol> |
559 | | -<li>Put secrets in a <code>.env</code> file on the server, alongside your compose.yaml. |
560 | | - Convenient but Less secure. Be sure to <code>chmod 600 .env</code>.</li> |
561 | | -<li>Set environment variables in the the <code>docker compose</code> command. Inconvenient. |
562 | | - Be sure to disable shell history.</li> |
563 | | -<li>Use environment injection in CI/CD.</li> |
| 539 | +<li><strong><code>.env</code> file</strong> — simplest for manual deploys.</li> |
564 | 540 | </ol> |
565 | | -<h2 id="launch-your-stack">🚀 Launch your Stack</h2> |
566 | | -<p>Bring up the stack:</p> |
| 541 | +<div class="highlight"><pre><span></span><code>chmod<span class="w"> </span><span class="m">600</span><span class="w"> </span>.env |
| 542 | +</code></pre></div> |
| 543 | +<ol> |
| 544 | +<li><strong>Environment variables</strong> — pass them directly to the command line.</li> |
| 545 | +<li><strong>CI/CD injection</strong> — good for automated pipelines.</li> |
| 546 | +</ol> |
| 547 | +<h2 id="launch-the-app">🚀 Launch the App</h2> |
| 548 | +<p>Start the application on the server:</p> |
567 | 549 | <div class="highlight"><pre><span></span><code>docker<span class="w"> </span>compose<span class="w"> </span>pull |
568 | 550 | docker<span class="w"> </span>compose<span class="w"> </span>up<span class="w"> </span>-d |
569 | 551 | </code></pre></div> |
| 552 | +<p>Your backend is now live. 🚀</p> |
570 | 553 | <hr /> |
571 | | -<p>That’s it — your backend is live.</p> |
572 | | -<p>This type of rolling deployment makes it hard to test before going live and to |
573 | | -rollback, and can have some downtime while upgrading. Consider reading the Wiki |
574 | | -page on <a href="">Advanced Deployments</a>.</p> |
575 | | -<h2 id="github-actions-workflow">Github Actions Workflow</h2> |
576 | | -<p>TODO</p> |
577 | | -<hr /> |
578 | | -<h2 id="what-now">➕ What Now?</h2> |
579 | | -<p>Add to your app by following guides in the <a href="https://github.com/explodinlabs/superstack/wiki">Wiki</a>.</p> |
| 554 | +<h2 id="next-steps">🧭 Next Steps</h2> |
| 555 | +<p>This setup replaces the stack in place.</p> |
| 556 | +<p>If you want zero-downtime deployments, rollback support, or blue-green testing, |
| 557 | +see the Wiki page: <a href="https://github.com/explodinlabs/superstack/wiki">Advanced |
| 558 | +Deployments</a>.</p> |
580 | 559 |
|
581 | 560 |
|
582 | 561 |
|
|
0 commit comments