Hamamatsu.js #4 ES6 playground by Docker

Docker / ES2015 sandbox 2018.8.3 Hamamatsu.js #4 @jacoyutorius ͱΓ͋͑ͣDockerͰWebαʔόʔΛཱͯͯjsΛॻ͍ͯΈΔ

Yuto Ogi FOURIER.Inc Ruby, Rails, Javascript, Vue.js, AWS Hamamatsu.rb JAWS-UG
Hamamatsu @jacoyutoirus

Contents ES2015ͷ৽ػೳΛࢼ͢؀ڥΛDockerͰ࡞Δ

Contents Docker v18.06 / Kitematic Editor

Purpose खܰʹWebαʔόʔΛཱ͍ͯͨ ϩʔΧϧʹΠϯετʔϧͨ͠Webαʔόʔ͸ઃఆมߋ͕໘౗ Ծ૝Ϛγϯ͸ىಈ͕஗͍ ͦΖͦΖDocker͍ͬͱ͔͘ɾɾɾ .htmlϑΝΠϧΛ௚ʹ։͘ͱCORSͷ੍ݶʹҾ͔͔ͬΔ

Dockerﬁle FROM nginx MAINTAINER jacoyutorius <[email protected]> USER root RUN apt-get
update

docker-compose ෳ਺ͷ%PDLFSΠϝʔδΛҰׅ؅ཧͰ͖Δɻ

docker-compose version: "3" services: webserver: build: context: "./" image: nginx
ports: - "5000:80"

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 ﬁle 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" "-"

Kitematic

localhost:5000

docker-compose up -d %BFNPOϞʔυɻόοΫάϥ΢ϯυͰ%PDLFS͕ىಈ͢Δɻ

docker-compose exec EPDLFSDPNQPTFFYFDXFCTFSWFSCJOCBTI ·ͨ͸ɺ

html/index.html <html> <head></head> <body> <h1>Hello!</h1> </body> </html>

docker-compose up version: "3" services: webserver: build: context: "./" image:
nginx volumes: - “./html:/usr/share/nginx/html” ports: - "5000:80"

localhost:5000

html/js/script.js window.onload = () => { const p = document.createElement("p")
p.innerText = "How are you?" document.body.appendChild(p) }

html/index.html <html> <head></head> <body> <h1>Hello!</h1> <script type=“module” src=“/js/script.js”></script> </body> </html>

localhost:5000

html/js/modules/greet.js export default (name) => { return `How are you?
${name}` }

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) }

localhost:5000

tree . ᵓᴷᴷ Dockerﬁle ᵓᴷᴷ docker-compose.yml ᵋᴷᴷ html ᵓᴷᴷ index.html
ᵋᴷᴷ js ᵓᴷᴷ libs ᴹ ᵋᴷᴷ greet.js ᵋᴷᴷ script.js

ES2015 Arrow Function String literal module

end Arrow Function String literal module

Hamamatsu.js #4 ES6 playground by Docker

Hamamatsu.js #4 ES6 playground by Docker

jacoyutorius

More Decks by jacoyutorius

Other Decks in Programming

Featured

Transcript

Docker / ES2015 sandbox 2018.8.3 Hamamatsu.js #4 @jacoyutorius ͱΓ͋͑ͣDockerͰWebαʔόʔΛཱͯͯjsΛॻ͍ͯΈΔ

Yuto Ogi FOURIER.Inc Ruby, Rails, Javascript, Vue.js, AWS Hamamatsu.rb JAWS-UG

Contents ES2015ͷ৽ػೳΛࢼ͢؀ڥΛDockerͰ࡞Δ

Contents Docker v18.06 / Kitematic Editor

Purpose खܰʹWebαʔόʔΛཱ͍ͯͨ ϩʔΧϧʹΠϯετʔϧͨ͠Webαʔόʔ͸ઃఆมߋ͕໘౗ Ծ૝Ϛγϯ͸ىಈ͕஗͍ ͦΖͦΖDocker͍ͬͱ͔͘ɾɾɾ .htmlϑΝΠϧΛ௚ʹ։͘ͱCORSͷ੍ݶʹҾ͔͔ͬΔ

Dockerﬁle FROM nginx MAINTAINER jacoyutorius <[email protected]> USER root RUN apt-get

docker-compose ෳ਺ͷ%PDLFSΠϝʔδΛҰׅ؅ཧͰ͖Δɻ

docker-compose version: "3" services: webserver: build: context: "./" image: nginx

docker-compose up $ docker-compose up Creating network "hmjs4_default" with the

Kitematic

localhost:5000

docker-compose up -d %BFNPOϞʔυɻόοΫάϥ΢ϯυͰ%PDLFS͕ىಈ͢Δɻ

docker-compose exec EPDLFSDPNQPTFFYFDXFCTFSWFSCJOCBTI ·ͨ͸ɺ

html/index.html <html> <head></head> <body> <h1>Hello!</h1> </body> </html>

docker-compose up version: "3" services: webserver: build: context: "./" image:

localhost:5000

html/js/script.js window.onload = () => { const p = document.createElement("p")

html/index.html <html> <head></head> <body> <h1>Hello!</h1> <script type=“module” src=“/js/script.js”></script> </body> </html>

localhost:5000

html/js/modules/greet.js export default (name) => { return `How are you?

html/js/script.js import greet from “/js/libs/greet.js" window.onload = () => {

localhost:5000

tree . ᵓᴷᴷ Dockerﬁle ᵓᴷᴷ docker-compose.yml ᵋᴷᴷ html ᵓᴷᴷ index.html

ES2015 Arrow Function String literal module

end Arrow Function String literal module