Hamamatsu.js #4 ES6 playground by Docker

Hamamatsu.js #4の発表資料です。

Transcript

1. Docker / ES2015 sandbox 2018.8.3 Hamamatsu.js #4 @jacoyutorius ͱΓ͋͑ͣDockerͰWebαʔόʔΛཱͯͯjsΛॻ͍ͯΈΔ
2. Yuto Ogi FOURIER.Inc Ruby, Rails, Javascript, Vue.js, AWS Hamamatsu.rb JAWS-UG Hamamatsu @jacoyutoirus
3. Contents ES2015ͷ৽ػೳΛࢼ͢؀ڥΛDockerͰ࡞Δ
4. Contents Docker v18.06 / Kitematic Editor
5. Purpose खܰʹWebαʔόʔΛཱ͍ͯͨ ϩʔΧϧʹΠϯετʔϧͨ͠Webαʔόʔ͸ઃఆมߋ͕໘౗ Ծ૝Ϛγϯ͸ىಈ͕஗͍ ͦΖͦΖDocker͍ͬͱ͔͘ɾɾɾ .htmlϑΝΠϧΛ௚ʹ։͘ͱCORSͷ੍ݶʹҾ͔͔ͬΔ
6. Dockerfile FROM nginx MAINTAINER jacoyutorius <jacoyutorius@gmail.com> USER root RUN apt-get update
7. docker-compose ෳ਺ͷ%PDLFSΠϝʔδΛҰׅ؅ཧͰ͖Δɻ
8. docker-compose version: "3" services: webserver: build: context: "./" image: nginx ports: - "5000:80"
9. docker-compose up $ docker-compose up Creating network "hmjs4_default" with the default driver Creating hmjs4_webserver_1 ... done Attaching to hmjs4_webserver_1 webserver_1 | 172.22.0.1 - - [02/Aug/2018:14:01:33 +0000] "GET / HTTP/1.1" 200 612 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Kitematic/0.13.0 Chrome/ 45.0.2454.85 Electron/0.35.4 Safari/537.36" "-" webserver_1 | 172.22.0.1 - - [02/Aug/2018:14:01:34 +0000] "GET / HTTP/1.1" 200 612 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/ 537.36" "-" webserver_1 | 2018/08/02 14:01:35 [error] 8#8: *2 open() "/usr/share/nginx/html/favicon.ico" failed (2: No such file or directory), client: 172.22.0.1, server: localhost, request: "GET /favicon.ico HTTP/1.1", host: "localhost: 5500", referrer: "http://localhost:5500/" webserver_1 | 172.22.0.1 - - [02/Aug/2018:14:01:35 +0000] "GET /favicon.ico HTTP/1.1" 404 571 "http:// localhost:5500/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36" "-"
10. Kitematic
11. localhost:5000
12. docker-compose up -d %BFNPOϞʔυɻόοΫάϥ΢ϯυͰ%PDLFS͕ىಈ͢Δɻ
13. docker-compose exec EPDLFSDPNQPTF
    FYFD
    XFCTFSWFS
    CJOCBTI ·ͨ͸ɺ
14. html/index.html <html> <head></head> <body> <h1>Hello!</h1> </body> </html>
15. docker-compose up version: "3" services: webserver: build: context: "./" image: nginx volumes: - “./html:/usr/share/nginx/html” ports: - "5000:80"
16. localhost:5000
17. html/js/script.js window.onload = () => { const p = document.createElement("p") p.innerText = "How are you?" document.body.appendChild(p) }
18. html/index.html <html> <head></head> <body> <h1>Hello!</h1> <script type=“module” src=“/js/script.js”></script> </body> </html>
19. localhost:5000
20. html/js/modules/greet.js export default (name) => { return `How are you? ${name}` }
21. html/js/script.js import greet from “/js/libs/greet.js" window.onload = () => { const p = document.createElement("p") p.innerText = greet("yuto") document.body.appendChild(p) }
22. localhost:5000
23. tree . ᵓᴷᴷ Dockerfile ᵓᴷᴷ docker-compose.yml ᵋᴷᴷ html ᵓᴷᴷ index.html ᵋᴷᴷ js ᵓᴷᴷ libs ᴹ ᵋᴷᴷ greet.js ᵋᴷᴷ script.js
24. ES2015 Arrow Function String literal module
25. end Arrow Function String literal module