Deployment 101 for

Frontenders

 

Coded, after all is, to deploy you need.  How do we do this, hmm?.  Teach you the easier ways, I will!  

$whoami

Diana Rodríguez 

Chief DevOps Architect @ Voicethread

GDE Web / Cloud / Maps / Firebase

 Auth0 Ambassador

Worldwide Community Organiser @ Vuevixens

🦊  https://vuevixens.org

🐦  @cotufa82

 

<likes> Food, Infrastructure, Food, Vue.js, Food, Travelling, and of course, starwars </likes>

@cotufa82

Effects of DevOps
 

The adoption of DevOps culture, tools and agile engineering practices has, among other things, the nice effect of increasing the collaboration between the roles of development and operations. One of the main problem of the past (but also today in some realities) is that the dev team tended to be uninterested in the operation and maintenance of a system once it was handed over to the ops team, while the latter tended to be not really aware of the system’s business goals and, therefore, reluctant in satisfying the operational needs of the system (also referred to as “whims of developers”).

 

📜

@cotufa82

Deploying Static Apps?

DEMO TIME

@cotufa82

SUPER SUBJECTIVE

@cotufa82

surge.sh

@cotufa82

Set up & Deploy

## Install Cli (and complete the signup process)

npm install -g surge



## Build your app!

npm run build  ## OR...

npm run generate


## Once your app is done, go to your `dist` folder and have fun! 

surge

@cotufa82

@cotufa82

🦄

@cotufa82

now.sh

@cotufa82

Set up & Deploy

## Install Cli (and complete the signup process)

npm install -g now


## Build your app!

npm run build  ## OR...

npm run generate


## Once your app is done, go to your `dist` folder and have fun! 

now

@cotufa82

🔥

@cotufa82

Firebase Hosting

@cotufa82

@cotufa82

Set Up & Deploy

## Install Cli (and complete the signup process) 

npm install -g firebase-tools

## Login

firebase login

## Init

firebase init

## Deploy

firebase deploy

@cotufa82

@cotufa82

💅

@cotufa82

@cotufa82

Deploying Vue Vixens Website

THE TRADITIONAL APPROACH

@cotufa82

"name": "vuevixens",
  "version": "1.0.0",
  "description": "Workshops for Foxy People",
  "author": "NataliaTepluhina <yeahright@nostalkers.com>",

NAME YOUR APP PLEASE!!

@cotufa82

Essentials

  • Server: Advised over 2Gb RAM - 💖 GCP 🤪
  • Install node / npm
  • Install NGINX

@cotufa82

Configure NGINX

We use Nginx As A Reverse Proxy to serve our app

## sudo nano /etc/nginx/sites-available/default

server {

listen 80 default_server;
server_name YOUR_DOMAIN_OR_IP_ADDRESS;
root /var/www/html;

index index.php index.html index.htm;
location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

@cotufa82

Installing PM2

Pm2 is a production process manager that helps us keep our app alive at all times. It restarts the app during boot offloading us the task of  restarting our application manually should we restart our server.

## Install

npm install pm2 -g

## Build your app, Start it and then...

pm2 start npm --name "your-app-alias" -- start

## If you rebuild... restart your app..

pm2 restart your-app-alias

@cotufa82

@cotufa82

@cotufa82

Another awesome way...

@cotufa82

I'LL BE BACK... 

@cotufa82

THANK YOU!!!

vueployment

By Super Diana

vueployment

Makes your life easier

  • 457
Loading comments...

More from Super Diana