Commit 1b68d0bc authored by Marc BOUVIER's avatar Marc BOUVIER 🙃
Browse files

Update making-of.md

parent 59dee22d
# Making of this url shortener
This Url shortener is static. The links shortened will be added as yaml files pushed to a Git repo.
Then a CI will build and deploy it on a static http server.
https://u.baldir.fr is a static URL shortener. It means it is generated and
served on a simple HTTP server (in our case NGinx). The links shortened will be
added as yaml files pushed to a Git repo. Then a Gitlab CI will build and deploy
changes on a static http server (for my case through SSH on a Linode)
## Install gridsome cli & setup project
In my setup, I develop and deploy on the same machine. In a more traditional
setup, an artefact would be generated during the build and then deployed
remotely.
Follow https://gridsome.org/docs/#prerequisites
```bash
......@@ -18,11 +24,13 @@ gridsome develop
## Install plugins
We want to addd an entry for each url to shorten as a yaml file.
Gridsome wil read all `*.yml` files from `content/links` and convert it as a graphql collection.
Then, we will use the collection in our vue components.
We want to add an entry for each url to shorten as a yaml file.
Gridsome wil read all `*.yml` files from `content/links` and convert it as a
GraphQL collection. Then, we will use the collection in our vue components.
We need to install [`@gridsome/source-filesystem`](https://gridsome.org/plugins/@gridsome/source-filesystem) plugin.
We need to install
[`@gridsome/source-filesystem`](https://gridsome.org/plugins/@gridsome/source-filesystem)
plugin.
```bash
yarn add @gridsome/source-filesystem
......@@ -30,7 +38,9 @@ yarn add @gridsome/source-filesystem
npm install @gridsome/source-filesystem
```
We also need to install a yaml transformer: [`@gridsome/transformer-yaml`](https://gridsome.org/plugins/@gridsome/transformer-yaml)
We also need to install a yaml transformer:
[`@gridsome/transformer-yaml`](https://gridsome.org/plugins/@gridsome/transformer-yaml)
```bash
yarn add @gridsome/transformer-yaml
# or if you ar using npm
......@@ -61,7 +71,8 @@ module.exports = {
}
```
This will create a graphQL collection `allUrl()` and also a vue Route that will use the property `tinyUrl` as part of the Url.
This will create a GraphQL collection `allUrl()` and also a vue Route that will
use the property `tinyUrl` as part of the Url.
Create a folder to host the content : `content/links`
......@@ -115,9 +126,10 @@ Test the following query :
Now we want a template to be applied to the site for the route we defined.
Create the file `src/templates/Url.vue`. Note that it matches the typeName we defined earlier.
Create the file `src/templates/Url.vue`. Note that it matches the typeName we
defined earlier.
```vue
```xml
<template>
<Layout>
<div>
......@@ -147,7 +159,8 @@ query Url ($path: String!) {
</page-query>
```
This template uses the data from graphQL query and redirects to the destination URL.
This template uses the data from graphQL query and redirects to the destination
URL.
Try it : localhost:4000/google
......@@ -163,7 +176,7 @@ remove the files
Modify `src/pages/index.vue` with the following.
```vue
```xml
<template>
<div>
<h1>Shortened URLS</h1>
......@@ -206,9 +219,50 @@ build1:
- sshpass -p "$server_ssh_secret" ssh -o StrictHostKeyChecking=no "$server_ssh_user@$server_ssh_url" 'cd /home/marc/sources/u.baldir.fr && git checkout master && git fetch origin && git reset --hard origin/HEAD && git pull && gridsome build'
```
The previous script checkout latest version from github repository and then
builds static content with gridsome CLI.
Set variables in your gitlab project
* $server_ssh_secret : your ssh password
* $server_ssh_user : your ssh user
* $server_ssh_url : url of the server
## Alternative deployment automation
Alternatively, we could create an artifact from generated `dist` folder and
store it as a zip file in an artifact repository. Then the CI can trigger
this artifact to be downloaded (for instance with a ssh command) and deflated
in the appropriate location of the HTTP server.
## Nginx configuration
No need for rewrite configuration in NGinx, it is managed by VueJs. It works
out of the box even if we use HTTPS.
```
server {
server_name u.baldir.fr;
location / {
root /home/marc/sources/u.baldir.fr/dist;
index index.html;
}
error_page 404 /404.html;
location = /50x.html {
root /usr/share/nginx/html;
}
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/u.baldir.fr/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/u.baldir.fr/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
```
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment