Skip to content

Commit 2c6538f

Browse files
committed
Merge branch 'docs/multibrand' of https://github.com/vuestorefront/vue-storefront into docs/multibrand
2 parents 9da252b + 00d61a0 commit 2c6538f

File tree

1 file changed

+135
-2
lines changed
  • docs/content/guides/6.multistore/2.tooling-and-concepts/4.deployment

1 file changed

+135
-2
lines changed

docs/content/guides/6.multistore/2.tooling-and-concepts/4.deployment/6.deployment.md

Lines changed: 135 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,147 @@ navigation:
77

88
# Deployment - How it works?
99

10+
Ever wondered how Alokai transforms your codebase into a live, running application? This guide takes you behind the scenes of the deployment process, showing you exactly how your code goes from development to production.
11+
12+
## Deployment Process Overview
13+
14+
Ready to deploy your store? It all starts with a single command:
15+
16+
```bash
17+
yarn store deploy
18+
```
19+
20+
While this command is typically executed in your [continuous delivery pipeline](/guides/multistore/tooling-and-concepts/deployment/ci-cd), you can also run the deployment locally on your machine.
21+
22+
::tip Getting Started with Deployment
23+
Learn how to configure your stores and run your deployment locally in the [Deployment - Configuration](/guides/multistore/tooling-and-concepts/deployment/configuration) guide. For more details about the `store deploy` command, see the [CLI reference](/guides/multistore/tooling-and-concepts/cli-reference).
24+
::
25+
26+
The command performs a deployment of chosen stores. The deployment process consists of six main stages that transform your source code into running applications:
27+
28+
1. Store Composition
29+
2. Build Process
30+
3. Docker Image Preparation
31+
4. Docker Image Building
32+
5. Image Registry Push
33+
6. Deployment Trigger
34+
35+
Let's explore each stage in detail.
36+
37+
### 1. Store Composition
38+
39+
The journey begins with store composition. The CLI uses the [file-based inheritance](/guides/multistore/tooling-and-concepts/file-based-inheritance) rules to compose the stores by:
40+
- Collecting files from base applications
41+
- Applying overrides from parent stores, based on the file-based inheritance
42+
- Adding store-specific customizations
43+
44+
Everything comes together in the temporary `.out/<store-id>` directory (which is git-ignored), ready for the next stage.
45+
46+
::info Independent Files in `.out` Directory
47+
Unlike in the `apps` directory where files are shared between stores through inheritance, each store in the `.out` directory has its own independent copy of all files. Let's take a look at the following example:
48+
49+
```bash
50+
apps/
51+
├── storefront-unified-nextjs/ # Base shared code
52+
├── tailwind.config.ts
53+
├── ...
54+
└── stores/
55+
├── fashion-brand/
56+
│ ├── storefront-unified-nextjs/
57+
│ │ ├── components/
58+
│ │ │ ├── header.tsx
59+
│ ├── stores/
60+
│ │ ├── us/
61+
│ │ ├── eu/
62+
```
63+
64+
The CLI copies files to their respective store directories, creating separate Next.js/Nuxt, Middleware and Playwright projects with their own complete source code for each store:
65+
66+
```bash
67+
.out/
68+
├── us/
69+
│ ├── storefront-unified-nextjs/
70+
│ │ ├── tailwind.config.ts # a copy from base
71+
│ │ ├── ...
72+
│ │ ├── components/
73+
│ │ │ ├── header.tsx # a copy from fashion-brand
74+
└── eu/
75+
├── storefront-unified-nextjs/
76+
│ ├── tailwind.config.ts # a copy from base
77+
│ ├── ...
78+
│ ├── components/
79+
│ │ ├── header.tsx # a copy from fashion-brand
80+
```
81+
::
82+
83+
::tip Learn more about composition
84+
For detailed information about how stores are composed, see the [File-based inheritance](/guides/multistore/tooling-and-concepts/file-based-inheritance) guide.
85+
::
86+
87+
### 2. Build Process
88+
89+
With the stores composed, the build phase begins. The CLI executes the `build` script defined in each application's `package.json` file to create production-ready builds.
90+
91+
### 3. Docker Image Preparation
92+
93+
Now comes the optimization phase. The CLI prepares standalone applications in `.out/<store-id>/<app-name>/.deploy` directories, carefully selecting only the essential files needed for production. This process significantly reduces image sizes and speeds up deployments.
94+
95+
::tip `.deploy` Directory
96+
Curious about what goes into the production build? You can explore the `.deploy` directory at `.out/<store-id>/<app-name>/.deploy` after running the `store deploy` command.
97+
::
98+
99+
### 4. Docker Image Building
100+
101+
With the `.deploy` directories ready, the CLI builds Docker images for each application (Middleware and Frontend). All applications use a similar Dockerfile. A simplified version of the Dockerfile looks like this:
102+
103+
```dockerfile
104+
# Use lightweight Node.js alpine as the base image
105+
FROM node:18-alpine
106+
107+
# Set the working directory
108+
WORKDIR /var/www
109+
110+
# Copy the optimized .deploy directory
111+
COPY ./.deploy/ ./
112+
113+
# Configure the entrypoint for running the production app
114+
ENTRYPOINT ["node", "server.js"]
115+
```
116+
117+
This simple and efficient Dockerfile structure ensures:
118+
- Small image sizes through the use of Alpine base image
119+
- Only production files are included via the `.deploy` directory
120+
- Proper entrypoint for running the production app
121+
- Maximum compatibility with CI/CD providers by using basic Docker features only (no buildx or other modern Docker features required)
122+
123+
### 5. Image Registry Push
124+
125+
With our optimized applications ready, the CLI:
126+
1. Tags images with the latest commit SHA
127+
2. Authenticates with the Alokai Cloud registry
128+
3. Pushes images to the container repository
129+
130+
::tip Why commit SHA?
131+
Using commit SHAs for tagging provides unique identification of each deployment, enabling easy rollbacks and ensuring clear tracking of deployed code. Remember to always commit your changes before deploying, even for local deployments, as the SHA is used for tagging.
132+
::
133+
134+
### 6. Deployment Trigger
135+
136+
In the final stage:
137+
1. CLI sends request to the Alokai Console API
138+
2. Console orchestrates the deployment across the cloud infrastructure
139+
140+
## Result
141+
142+
Once the `store deploy` command completes its work, you can check the Alokai Console to monitor the deployment status and see your store transition from code to a live, running application.
10143

11144
::card{title="Next: Deployment - Configuration" icon="tabler:number-3-small" }
12145

13146
#description
14-
TODO
147+
Learn how to configure your stores for deployment using `alokai.config.json`.
15148

16149
#cta
17-
:::docs-arrow-link{to="/guides/multistore/tooling-and-concepts/configuration"}
150+
:::docs-arrow-link{to="/guides/multistore/tooling-and-concepts/deployment/configuration"}
18151
Next
19152
:::
20153
::

0 commit comments

Comments
 (0)