SlideShare une entreprise Scribd logo
1  sur  10
Télécharger pour lire hors ligne
Frontend deployment

w 3 prostych krokach
Łukasz Golder
Frontend Developer
lukasz.golder@tsh.io
demo
Budowanie
Deployowanie
Optymalizacja
Budowanie
Deployowanie
Optymalizacja
Budowanie
Deployowanie
Optymalizacja
Podsumowanie
Budowanie
npm scripts
kompresowanie
manglowanie
autoprefixer
Podsumowanie
Deployowanie
Amazon S3
garland/aws-cli-docker
aws s3 rm s3://$(BUCKET_NAME)/ --recursive
aws s3 cp /usr/build s3://$(BUCKET_NAME)/ --
recursive --acl public-read
Podsumowanie
Optymalizacja
kompresja obrazków
gzip
blokujący js / css
Dziękuje za uwagę
https://github.com/lukaszgolder/frontend-deployment

Contenu connexe

En vedette

Design dla estetycznie ograniczonych
Design dla estetycznie ograniczonychDesign dla estetycznie ograniczonych
Design dla estetycznie ograniczonychThe Software House
 
Tester - przyjaciel czy wróg programisty?
Tester - przyjaciel czy wróg programisty?Tester - przyjaciel czy wróg programisty?
Tester - przyjaciel czy wróg programisty?The Software House
 
Bitcoin - (nie)udany eksperyment?
Bitcoin - (nie)udany eksperyment?Bitcoin - (nie)udany eksperyment?
Bitcoin - (nie)udany eksperyment?The Software House
 
Wielkie protokoły wielkich ludzi
Wielkie protokoły wielkich ludziWielkie protokoły wielkich ludzi
Wielkie protokoły wielkich ludziThe Software House
 
You Shall Not Pass - Security in Symfony
You Shall Not Pass - Security in SymfonyYou Shall Not Pass - Security in Symfony
You Shall Not Pass - Security in SymfonyThe Software House
 
Pi razy drzwi - o szacowaniu projektów
Pi razy drzwi - o szacowaniu projektówPi razy drzwi - o szacowaniu projektów
Pi razy drzwi - o szacowaniu projektówThe Software House
 
Gulp.js - alternatywa do Grunta
Gulp.js - alternatywa do GruntaGulp.js - alternatywa do Grunta
Gulp.js - alternatywa do GruntaThe Software House
 
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z u...
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z u...Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z u...
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z u...The Software House
 
Angular 2.0 – Kochaj albo rzuć!
Angular 2.0 – Kochaj albo rzuć!Angular 2.0 – Kochaj albo rzuć!
Angular 2.0 – Kochaj albo rzuć!The Software House
 
Angular restmod – wygodny sposób na komunikację z API
Angular restmod – wygodny sposób na komunikację z APIAngular restmod – wygodny sposób na komunikację z API
Angular restmod – wygodny sposób na komunikację z APIThe Software House
 
AngülarJS – Czyli o czym warto pamiętać programując za Odrą
AngülarJS – Czyli o czym warto pamiętać programując za OdrąAngülarJS – Czyli o czym warto pamiętać programując za Odrą
AngülarJS – Czyli o czym warto pamiętać programując za OdrąThe Software House
 
Nie wszystko, co ubite, w ziemi zostaje. Wprowadzenie do Event Sourcing
Nie wszystko, co ubite, w ziemi zostaje. Wprowadzenie do Event SourcingNie wszystko, co ubite, w ziemi zostaje. Wprowadzenie do Event Sourcing
Nie wszystko, co ubite, w ziemi zostaje. Wprowadzenie do Event SourcingThe Software House
 
Znaki mocy dla laików – Programowanie funkcyjne w JavaScript
Znaki mocy dla laików – Programowanie funkcyjne w JavaScriptZnaki mocy dla laików – Programowanie funkcyjne w JavaScript
Znaki mocy dla laików – Programowanie funkcyjne w JavaScriptThe Software House
 
Pierwsza aplikacja na iOS, czyli z czym można się spotkać, co jest trudne i c...
Pierwsza aplikacja na iOS, czyli z czym można się spotkać, co jest trudne i c...Pierwsza aplikacja na iOS, czyli z czym można się spotkać, co jest trudne i c...
Pierwsza aplikacja na iOS, czyli z czym można się spotkać, co jest trudne i c...The Software House
 
Wprowadzenie do języka Swift, czyli nowe podejście do programowania aplikacji...
Wprowadzenie do języka Swift, czyli nowe podejście do programowania aplikacji...Wprowadzenie do języka Swift, czyli nowe podejście do programowania aplikacji...
Wprowadzenie do języka Swift, czyli nowe podejście do programowania aplikacji...The Software House
 

En vedette (20)

Design dla estetycznie ograniczonych
Design dla estetycznie ograniczonychDesign dla estetycznie ograniczonych
Design dla estetycznie ograniczonych
 
Tester - przyjaciel czy wróg programisty?
Tester - przyjaciel czy wróg programisty?Tester - przyjaciel czy wróg programisty?
Tester - przyjaciel czy wróg programisty?
 
Bitcoin - (nie)udany eksperyment?
Bitcoin - (nie)udany eksperyment?Bitcoin - (nie)udany eksperyment?
Bitcoin - (nie)udany eksperyment?
 
Varnish
VarnishVarnish
Varnish
 
Wielkie protokoły wielkich ludzi
Wielkie protokoły wielkich ludziWielkie protokoły wielkich ludzi
Wielkie protokoły wielkich ludzi
 
TDD w iOS
TDD w iOS TDD w iOS
TDD w iOS
 
Testing and symfony2
Testing and symfony2Testing and symfony2
Testing and symfony2
 
You Shall Not Pass - Security in Symfony
You Shall Not Pass - Security in SymfonyYou Shall Not Pass - Security in Symfony
You Shall Not Pass - Security in Symfony
 
Pi razy drzwi - o szacowaniu projektów
Pi razy drzwi - o szacowaniu projektówPi razy drzwi - o szacowaniu projektów
Pi razy drzwi - o szacowaniu projektów
 
Gulp.js - alternatywa do Grunta
Gulp.js - alternatywa do GruntaGulp.js - alternatywa do Grunta
Gulp.js - alternatywa do Grunta
 
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z u...
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z u...Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z u...
Praktyczne porady na temat optymalizacji wydajności aplikacji tworzonych z u...
 
Angular 2.0 – Kochaj albo rzuć!
Angular 2.0 – Kochaj albo rzuć!Angular 2.0 – Kochaj albo rzuć!
Angular 2.0 – Kochaj albo rzuć!
 
Angular restmod – wygodny sposób na komunikację z API
Angular restmod – wygodny sposób na komunikację z APIAngular restmod – wygodny sposób na komunikację z API
Angular restmod – wygodny sposób na komunikację z API
 
AngülarJS – Czyli o czym warto pamiętać programując za Odrą
AngülarJS – Czyli o czym warto pamiętać programując za OdrąAngülarJS – Czyli o czym warto pamiętać programując za Odrą
AngülarJS – Czyli o czym warto pamiętać programując za Odrą
 
Nie wszystko, co ubite, w ziemi zostaje. Wprowadzenie do Event Sourcing
Nie wszystko, co ubite, w ziemi zostaje. Wprowadzenie do Event SourcingNie wszystko, co ubite, w ziemi zostaje. Wprowadzenie do Event Sourcing
Nie wszystko, co ubite, w ziemi zostaje. Wprowadzenie do Event Sourcing
 
Bestiariusza wpisy wybrane
Bestiariusza wpisy wybraneBestiariusza wpisy wybrane
Bestiariusza wpisy wybrane
 
Znaki mocy dla laików – Programowanie funkcyjne w JavaScript
Znaki mocy dla laików – Programowanie funkcyjne w JavaScriptZnaki mocy dla laików – Programowanie funkcyjne w JavaScript
Znaki mocy dla laików – Programowanie funkcyjne w JavaScript
 
PHP 7
PHP 7PHP 7
PHP 7
 
Pierwsza aplikacja na iOS, czyli z czym można się spotkać, co jest trudne i c...
Pierwsza aplikacja na iOS, czyli z czym można się spotkać, co jest trudne i c...Pierwsza aplikacja na iOS, czyli z czym można się spotkać, co jest trudne i c...
Pierwsza aplikacja na iOS, czyli z czym można się spotkać, co jest trudne i c...
 
Wprowadzenie do języka Swift, czyli nowe podejście do programowania aplikacji...
Wprowadzenie do języka Swift, czyli nowe podejście do programowania aplikacji...Wprowadzenie do języka Swift, czyli nowe podejście do programowania aplikacji...
Wprowadzenie do języka Swift, czyli nowe podejście do programowania aplikacji...
 

Plus de The Software House

Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...
Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...
Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...The Software House
 
Jak efektywnie podejść do certyfikacji w AWS?
Jak efektywnie podejść do certyfikacji w AWS?Jak efektywnie podejść do certyfikacji w AWS?
Jak efektywnie podejść do certyfikacji w AWS?The Software House
 
O co chodzi z tą dostępnością cyfrową?
O co chodzi z tą dostępnością cyfrową?O co chodzi z tą dostępnością cyfrową?
O co chodzi z tą dostępnością cyfrową?The Software House
 
Chat tekstowy z użyciem Amazon Chime
Chat tekstowy z użyciem Amazon ChimeChat tekstowy z użyciem Amazon Chime
Chat tekstowy z użyciem Amazon ChimeThe Software House
 
Jak nie zwariować z architekturą Serverless?
Jak nie zwariować z architekturą Serverless?Jak nie zwariować z architekturą Serverless?
Jak nie zwariować z architekturą Serverless?The Software House
 
Analiza semantyczna artykułów prasowych w 5 sprintów z użyciem AWS
Analiza semantyczna artykułów prasowych w 5 sprintów z użyciem AWSAnaliza semantyczna artykułów prasowych w 5 sprintów z użyciem AWS
Analiza semantyczna artykułów prasowych w 5 sprintów z użyciem AWSThe Software House
 
Feature flags na ratunek projektu w JavaScript
Feature flags na ratunek projektu w JavaScriptFeature flags na ratunek projektu w JavaScript
Feature flags na ratunek projektu w JavaScriptThe Software House
 
Typowanie nominalne w TypeScript
Typowanie nominalne w TypeScriptTypowanie nominalne w TypeScript
Typowanie nominalne w TypeScriptThe Software House
 
Automatyzacja tworzenia frontendu z wykorzystaniem GraphQL
Automatyzacja tworzenia frontendu z wykorzystaniem GraphQLAutomatyzacja tworzenia frontendu z wykorzystaniem GraphQL
Automatyzacja tworzenia frontendu z wykorzystaniem GraphQLThe Software House
 
Serverless Compose vs hurtownia danych
Serverless Compose vs hurtownia danychServerless Compose vs hurtownia danych
Serverless Compose vs hurtownia danychThe Software House
 
Testy API: połączenie z bazą danych czy implementacja w pamięci
Testy API: połączenie z bazą danych czy implementacja w pamięciTesty API: połączenie z bazą danych czy implementacja w pamięci
Testy API: połączenie z bazą danych czy implementacja w pamięciThe Software House
 
Jak skutecznie read model. Case study
Jak skutecznie read model. Case studyJak skutecznie read model. Case study
Jak skutecznie read model. Case studyThe Software House
 
Firestore czyli ognista baza od giganta z Doliny Krzemowej
Firestore czyli ognista baza od giganta z Doliny KrzemowejFirestore czyli ognista baza od giganta z Doliny Krzemowej
Firestore czyli ognista baza od giganta z Doliny KrzemowejThe Software House
 
Jak utrzymać stado Lambd w ryzach
Jak utrzymać stado Lambd w ryzachJak utrzymać stado Lambd w ryzach
Jak utrzymać stado Lambd w ryzachThe Software House
 
O łączeniu Storyblok i Next.js
O łączeniu Storyblok i Next.jsO łączeniu Storyblok i Next.js
O łączeniu Storyblok i Next.jsThe Software House
 
Amazon Step Functions. Sposób na implementację procesów w chmurze
Amazon Step Functions. Sposób na implementację procesów w chmurzeAmazon Step Functions. Sposób na implementację procesów w chmurze
Amazon Step Functions. Sposób na implementację procesów w chmurzeThe Software House
 
Od Figmy do gotowej aplikacji bez linijki kodu
Od Figmy do gotowej aplikacji bez linijki koduOd Figmy do gotowej aplikacji bez linijki kodu
Od Figmy do gotowej aplikacji bez linijki koduThe Software House
 

Plus de The Software House (20)

Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...
Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...
Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...
 
Uszanowanko Podsumowanko
Uszanowanko PodsumowankoUszanowanko Podsumowanko
Uszanowanko Podsumowanko
 
Jak efektywnie podejść do certyfikacji w AWS?
Jak efektywnie podejść do certyfikacji w AWS?Jak efektywnie podejść do certyfikacji w AWS?
Jak efektywnie podejść do certyfikacji w AWS?
 
O co chodzi z tą dostępnością cyfrową?
O co chodzi z tą dostępnością cyfrową?O co chodzi z tą dostępnością cyfrową?
O co chodzi z tą dostępnością cyfrową?
 
Chat tekstowy z użyciem Amazon Chime
Chat tekstowy z użyciem Amazon ChimeChat tekstowy z użyciem Amazon Chime
Chat tekstowy z użyciem Amazon Chime
 
Migracje danych serverless
Migracje danych serverlessMigracje danych serverless
Migracje danych serverless
 
Jak nie zwariować z architekturą Serverless?
Jak nie zwariować z architekturą Serverless?Jak nie zwariować z architekturą Serverless?
Jak nie zwariować z architekturą Serverless?
 
Analiza semantyczna artykułów prasowych w 5 sprintów z użyciem AWS
Analiza semantyczna artykułów prasowych w 5 sprintów z użyciem AWSAnaliza semantyczna artykułów prasowych w 5 sprintów z użyciem AWS
Analiza semantyczna artykułów prasowych w 5 sprintów z użyciem AWS
 
Feature flags na ratunek projektu w JavaScript
Feature flags na ratunek projektu w JavaScriptFeature flags na ratunek projektu w JavaScript
Feature flags na ratunek projektu w JavaScript
 
Typowanie nominalne w TypeScript
Typowanie nominalne w TypeScriptTypowanie nominalne w TypeScript
Typowanie nominalne w TypeScript
 
Automatyzacja tworzenia frontendu z wykorzystaniem GraphQL
Automatyzacja tworzenia frontendu z wykorzystaniem GraphQLAutomatyzacja tworzenia frontendu z wykorzystaniem GraphQL
Automatyzacja tworzenia frontendu z wykorzystaniem GraphQL
 
Serverless Compose vs hurtownia danych
Serverless Compose vs hurtownia danychServerless Compose vs hurtownia danych
Serverless Compose vs hurtownia danych
 
Testy API: połączenie z bazą danych czy implementacja w pamięci
Testy API: połączenie z bazą danych czy implementacja w pamięciTesty API: połączenie z bazą danych czy implementacja w pamięci
Testy API: połączenie z bazą danych czy implementacja w pamięci
 
Jak skutecznie read model. Case study
Jak skutecznie read model. Case studyJak skutecznie read model. Case study
Jak skutecznie read model. Case study
 
Firestore czyli ognista baza od giganta z Doliny Krzemowej
Firestore czyli ognista baza od giganta z Doliny KrzemowejFirestore czyli ognista baza od giganta z Doliny Krzemowej
Firestore czyli ognista baza od giganta z Doliny Krzemowej
 
Jak utrzymać stado Lambd w ryzach
Jak utrzymać stado Lambd w ryzachJak utrzymać stado Lambd w ryzach
Jak utrzymać stado Lambd w ryzach
 
Jak poskromić AWS?
Jak poskromić AWS?Jak poskromić AWS?
Jak poskromić AWS?
 
O łączeniu Storyblok i Next.js
O łączeniu Storyblok i Next.jsO łączeniu Storyblok i Next.js
O łączeniu Storyblok i Next.js
 
Amazon Step Functions. Sposób na implementację procesów w chmurze
Amazon Step Functions. Sposób na implementację procesów w chmurzeAmazon Step Functions. Sposób na implementację procesów w chmurze
Amazon Step Functions. Sposób na implementację procesów w chmurze
 
Od Figmy do gotowej aplikacji bez linijki kodu
Od Figmy do gotowej aplikacji bez linijki koduOd Figmy do gotowej aplikacji bez linijki kodu
Od Figmy do gotowej aplikacji bez linijki kodu