You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Let's get to action deploying Nuxt3 via Github Actions
4
+
slug: deploying-nuxt3-via-github-actions
5
+
author: Rick Rohrig
6
+
date: 29 Sep 2022
7
+
subject: Nuxt Routing
8
+
position: 1
9
+
---
10
+
11
+
Hello [World]{.bg-blue-500}!
12
+
13
+
Automating deployments is pretty much standard these days. Manually typing in deployment commands is too time intensive and failure prone.
14
+
15
+
One option is GitHub Actions. If your project is open source, like **fullstackjack.dev**, it's also cost free.
16
+
17
+
## Bird's Eye View
18
+
19
+
20
+
![photo of github jobs flow diagram](https://fullstackjack.dev/img/deployment-jobs-overview.png"https://github.com/jurassicjs/nuxt3-fullstack-tutorial/actions")
21
+
22
+
### It all begins with a workflow.
23
+
A workflow needs a **trigger**, with can be as simple as pushing to a branch or something slightly more advanced like creating a release.
24
+
25
+
```yaml
26
+
on:
27
+
push:
28
+
branches:
29
+
- main
30
+
- 'feature/deploy'
31
+
```
32
+
33
+
In this example, the workflow will be triggered every time we push to the **main** or **feature/deploy** branches.
34
+
35
+
#### Jobs
36
+
A workflow contains one or more **jobs**.
37
+
38
+
```yaml
39
+
jobs:
40
+
test-application:
41
+
create-artifacts:
42
+
prepare-release:
43
+
activate-release:
44
+
clean-up:
45
+
```
46
+
Each of these jobs will contain one or more **steps**.
47
+
48
+
#### Steps
49
+
Let's take a look at the simplest job, **test-application**
50
+
51
+
```yaml
52
+
jobs:
53
+
test-application:
54
+
runs-on: ubuntu-latest
55
+
strategy:
56
+
matrix:
57
+
node-version: [ 16.17.0 ]
58
+
steps:
59
+
- uses: actions/checkout@v3
60
+
- name: Use Node.js ${{ matrix.node-version }}
61
+
uses: actions/setup-node@v3
62
+
with:
63
+
node-version: ${{ matrix.node-version }}
64
+
cache: 'yarn'
65
+
- run: yarn
66
+
- run: yarn build
67
+
- run: yarn test
68
+
```
69
+
70
+
At the risk of being redundant, I'll walk through what each line means.
71
+
72
+
```yaml
73
+
runs-on: ubuntu-latest
74
+
```
75
+
here is where you chose what operating system you want your job to run on.
76
+
77
+
```yaml
78
+
strategy:
79
+
matrix:
80
+
node-version: [ 16.17.0 ]
81
+
```
82
+
If you add a matrix, the job will run against each entry in the matrix. In this case, we've only listed one node version, so the job will only run against that node version.
83
+
84
+
```yaml
85
+
steps:
86
+
- uses: actions/checkout@v3
87
+
- name: Use Node.js ${{ matrix.node-version }}
88
+
uses: actions/setup-node@v3
89
+
with:
90
+
node-version: ${{ matrix.node-version }}
91
+
cache: 'yarn'
92
+
- run: yarn
93
+
- run: yarn build
94
+
- run: yarn test
95
+
```
96
+
::alert{icon=👉}
97
+
steps is where things get interesting.
98
+
::
99
+
100
+
We use Steps to run our deployment commands. It's like teaching someone every step you'd normally do manually to deploy,
101
+
but you know they will never make typos or do things in the wrong order. In other words, you've got the perfect sidekick.
102
+
103
+
The steps in the **test-application** are pretty straight forward, but as you'll see shortly, things can escalate quickly.
104
+
105
+
::alert{type=success icon=😎}
106
+
One super cool feature with GitHub Actions is you can break off the entire process if one job fails. So, for example, if your tests fail, you won't
0 commit comments