How do we casually create an Elixir community website with Phoenix?

How do we casually creat
e

an Elixir community websit
e

with Phoenix?
Ryotaro Imahashi (kokura.ex
)

10/15, 2021

View Slide

Welcome to

View Slide

4VNNBSZ
5IJTUBMLTIPXTIPXXFDSFBUFB
b$BTVBM`BOENJOJNBMJTUJDXFCTJUFPG
LPLVSBFY BMPDBM&MJYJSDPNNVOJUZJO
+BQBO XJUI1IPFOJY BOEQVCMJTIJU
*`MMTIPXXIBULPLVSBFY`TBDUJWJUJFT
MBUFS

View Slide

*XJMMJOGPSNB63-PG
UIFTFTMJEFTGPSNZUBML
MBUFSCZUXFFU
!JN@NJPMBC

View Slide

5IJTUBMLGPDVTPOUIFOFYUQSPDFTT
'PSb$BTVBM`BOERVJDLMZSFMFBTFBNJOJNBMJTUJD1IPFOJYXFCTJUF
1SFQBSFUIF1IPFOJYQSPKFDUCZOPFDUPXJUI%PDLFS
"EBQU$44MBZPVUCZ5BJMXJOE$44
1VUJUPO)FSPLV1BB4UPSFMFBTFUIFXFCTJUFUPUIFQVCMJD
1SFQBSFUPCVJME$*BOE$%UPNBLFPQFSBUJPOTFBTJFSCZVTJOH
$JSDMF$*WJB(JU)VC

View Slide

5IJTUBMLEPFT/05GPDVTPOUIFOFYUQSPDFTT
5IFGPMMPXJOHJTBDUVBMMZJNQMFNFOUFEBOEFYFDVUFE CVUNVDI
PGUIFFYQMBOBUJPOJTPNJUUFE
0QFSBUF(JUNBOBHFNFOU
*NQMFNFOUNBSLVQ)5.-
*NQMFNFOUUFTUT

View Slide

5IFEJBHSBNPGUIJTTZTUFN
HJUQVTI
UP(JU)VC
%FUFDUJPOPG
DIBOHFTCZ$JSDMF$*
#VJMEBOE
%FQMPZUP)FSPLV
IUUQTLPLVSBFYIFSPLVBQQDPN
%PDLFSJNBHF FMJYJSTMJN

*NQMFNFOUBUJPOXJUI
1IPFOJY OPFDUP

5BJMXJOE$44
.BDIJOF&YFDVUPS
-JOVY7.

)FSPLV
$POUBJOFS3FHJTUPSZ

View Slide

':*
5IF(JU)VCSFNPUFSFQPTJUPSZ63-GPSUIJTQSPKFDUXFIBWF
JNQMFNFOUFE
IUUQTHJUIVCDPNNJPMBCLPLVSBFY
1MFBTFUBLFBMPPLGPSZPVSSFGFSFODF
5IFDPEFPO(JU)VCJTBEEFEGSPNUIBUBUUIFQSFTFOUBUJPO

View Slide

BCPVUNF

View Slide

!JN@NJPMBC
!JNBJNBccJN
3ZPUBSP*NBIBTIJ
JO+BQBO
*MJWFJO,JUBLZVTIV +BQBO
*`N
"XFCEFWFMPQFSPGQJYJW*OD BOE
"OPSHBOJ[FSPGLPLVSBFY BMPDBM
&MJYJSDPNNVOJUZ

View Slide

IUUQTXXXQJYJWOFU
QJYJW*OD
QJYJW*ODQSPWJEFTBWBSJFUZ
PGTFSWJDFTUPTVQQPSU
DSFBUPST DFOUFSFEPOUIF
JMMVTUSBUJPODPNNVOJDBUJPO
TFSWJDFlQJYJWz
*GZPV`EMJLFUPUSZPVUPVS
TFSWJDFT QMFBTFEPTP
IUUQTWSPJEDPNFO

View Slide

.ZGBWPSJUFDPOUFOUT
.ZNBJOGBWPSJUFDPOUFOUTBSFGPMMPXJOHT
"OJNF
/FPO(FOFTJT&WBOHFMJPO
"UUBDLUIF5JUBO
%FNPO4MBZFS,JNFUTVOP:BJCB
'VMMNFUBM"MDIFNJTU BMDIFNJTU

/BUTVNFT#PPLPG'SJFOET
7JPMFU&WFSHBSEFO
.VTJD
"WJDJJ
;FEE
4UFWF3FJDI
"OENPSF

View Slide

.ZBOPUIFSBDUJWJUZ
%BJUPSZV"JLJ+VKVUTV
0OFPGUIF+BQBOFTFUSBEJUJPOBMNBSUJBMBSUT

8FQSBDUJDFb,BUB`PG+VKVUTV ,FOKVUTV *BJKVUTV
#PKVUTV BOENPSF
1IPUP`TEFTDSJQUJPO
,BUBPG+VKVUTV b,BSBNF;VNF`
5FBDIJOHB#PKVUTVUSJBMMFTTPO
4IFJTBOJOUFSOBUJPOBMTUVEFOUGSPN#FMHJVN

*BJKVUTVEFEJDBUJPOQFSGPSNBODFBUUIF
/BHPTIJ'FTUJWBM
"MMJNBHFTXFSFUBLFOJO'VLVPLB#VEPLBOCFGPSF
UIF$07*%FQJEFNJD

View Slide

BCPVULPLVSBFY

View Slide

lLPLVSBFYzJTBDPNNVOJUZ
UIBUQSPNPUFTUIF&MJYJS
QSPHSBNNJOHMBOHVBHFBOEJUT
XFCBQQMJDBUJPOGSBNFXPSL
1IPFOJY JO,JUBLZVTIV XIFSF
CPUIIJHITQFFEQSPDFTTJOH
QFSGPSNBODFBOEIJHI
EFWFMPQNFOUFGGJDJFODZDBO
CFBDIJFWFE
LPLVSBFY

View Slide

LPLVSBFYBDUJWJUZ
.PLVNPLVUFDINFFUVQ
8IJDIJTBIBDLBUIPOXIFSFFBDIBUUFOEFFBDUT
BMPOFUPXBSEFBDIHPBM JOSFMBY
LPLVSBFY3BEJP
&WFSZ8FEOFTEBZGSPNBNUPBN +BQBO
UJNF
POBJSBU5XJUUFS4QBDFT JO+BQBOFTF

5IJTJTBOBVEJPEJTUSJCVUJPOQSPHSBNGSPN
LPLVSBFY
5IFQSPHSBNGPDVTFTPOOFX*5UPQJDT JODMVEJOH
UIPTFSFMBUFEUPUIF&MJYJSEFWFMPQNFOUMBOHVBHF
5IFSFXJMMCFBRVFTUJPOBOEBOTXFSDPSOFSGPS
MJTUFOFSTBOEUFYUCBTFEJOGPSNBUJPOTIBSJOHPOUIF
LPLVSBFYDIBOOFMJOUIFAFMJYJSKQATMBDL
5IPVHIXFUBMLDVSSFOUMZPOUIFSBEJPJO+BQBOFTF
XF`SFXFMDPNF&OHMJTITQFBLFSTBOEXJMMUSZUP
JOUFSQSFUCPUIJO&OHMJTIBOE+BQBOFTF
LPLVSBFY3BEJP JOGPSNBUJPO

IUUQTGVLVPLBFYDPOOQBTTDPNFWFOU

View Slide

LPLVSBFYBDUJWJUZ
044DPOUSJCVUJPO
LPLVSBFYBOE1FMFNBZ.FFUVQ B
+BQBOFTF&MJYJSDPNNVOJUZ USZUP
DPOUSJCVUF044 FTQFDJBMMZ /Y &9-"
BOE#FBN"TN XIJDISFBMJ[FIJHI
TQFFEQSPDFTTJOHQFSGPSNBODF
1FMFNBZ.FFUVQ
IUUQTQFMFNBZDPOOQBTTDPNFWFOU

View Slide

$IBQUFS
$IFDLJOHUIFEFWFMPQNFOU
FOWJSPONFOUBOE
CFHJOOJOHPGUIFTUPSZ

View Slide

5IFWFSJGJFEWFSTJPOTPGUIJTUBML
5IFEFWFMPQNFOUNBDIJOFGPSUIJTUBMLJTB.BD*OUFM WFSTJPO#JH
4VS BOEFBDIWFSJGJFEWFSTJPOTPGUFDIOPMPHJFTBSFBTGPMMPXT
&MJYJS &SMBOH051

1IPFOJY
/PEFKT
5BJMXJOE$44

View Slide

5IFWFSJGJFEWFSTJPOTPGUIJTUBML
1IPFOJY

View Slide

/PX MFUTTUBSUXJUIUIFDPOUFOUTPGUIJTUBML

View Slide

UJUMFEXJUI&MJDB`T"EWFOUVSFT
JO1IPFOJYMBOE
/PX MFUTTUBSUXJUIUIFDPOUFOUTPGUIJTUBML

View Slide

*OUSPEVDJOHUIFNBJODIBSBDUFS

View Slide

.BJO"DUPS
/05NFBOTBDUPSPGDPODVSSFODZ
FYFDVUJOHTZTUFN

View Slide

.BJO"DUPS
&MJDB BO&MJYJSMPWFSEFWFMPQFS
FYFDVUJOHTZTUFN

View Slide

.BJO"DUPS
&MJDB BO&MJYJSMPWFSEFWFMPQFS
TIFXBOUTUPDSFBUFBUFDI
DPNNVOJUZTJUFDBTVBMMZ
FYFDVUJOHTZTUFN

View Slide

8JSFGSBNFPGUIFTJUF
XJTIGVMUIJOLJOH

( ´ʔ`)ɻоʢ

View Slide

8IJUF3BCCJUBMTPTBJE
*NMBUF *NMBUF *NMBUFz

*XBOOBNBLFJUNVDI
RVJDLFSBOEFBTJFS

View Slide

*XBOOBPQFSBUF
DPOUJOVPVTEFMJWFSZ
XJUIFBTF

View Slide

#58 *`WFOFWFSVTFEB
XFC1IPFOJYGSBNFXPSL
CVU*IFBSEJU`TOJDFGPS
UIJTTJUVBUJPO

View Slide

"OE UIF1IPFOJYWFSTJPOXBTSFMFBTFE
UIFMBTUNPOUI

View Slide

*U`TQFSGFDUUJNJOH JTO`UJU

View Slide

0, MFU`TTUBSU
1IPFOJYXJUINF

View Slide

$IBQUFS
TFUVQPG1IPFOJY

View Slide

8IBUUIJTDIBQUFSDPWFST
8FXJMMSVOUISPVHIUIFQSPDFTT
GSPNCVJMEJOHUIF%PDLFS
EFWFMPQNFOUFOWJSPONFOUUPCVJMEJOH
1IPFOJY
BOEEJTQMBZJOHUIFGJSTUl8FMDPNFUP
1IPFOJYzTDSFFO
4UFQT
1SFQBSFEPDLFSGJMFT
&YFDVUFAEPDLFSDPNQPTFCVJMEA
*OTUBMM1IPFOJYGSBNFXPSL

View Slide

% tree -L
2

.(e.g. kokuraex/
)

├── README.m
d

├── ap
p

│ └── Dockerfil
e

└── docker-compose.yml
/PX XFXJMMNBLFUIF1IPFOJYQSPKFDU
EJSFDUPSZBOEQSFQBSFUIFEPDLFSGJMFTBT
TIPXOPOUIFSJHIU
"CPVUUIFQSPKFDUEJSFDUPSZ XFOBNFE
lLPLVSBFYzUIJTUJNF
/PUF
8FPNJUNFOUJPOJOHTFWFSBMGJMFT GPS
FYBNQMF 3&"%.& HJUJHOPSF BOENPSF
*OUIFGPMMPXJOHDIBQUFST UPP
1SFQBSFEPDLFSGJMFT

View Slide

[app/Dockerfile
]

FROM elixir:1.12.2-sli
m

WORKDIR /usr/src/ap
p

RUN apt-get update -y &&
\

apt-get upgrade -y &&
\

apt-get install -y
\

build-essential
\

curl
\

git
\

gzip
\

inotify-tools
\

ssh
\

sudo
\

ta
r

RUN apt-get clea
n

RUN mix local.hex --force &&
\

mix local.rebar --forc
e

RUN mix archive.install hex phx_new 1.6.0 --forc
e

CMD [ "mix", "phx.server", "--no-halt" ]
1SFQBSFEEPDLFSDPNQPTFZNMBOE
%PDLFSGJMFJTIFSF
*UTQFDJGJFT1IPOFOJYWFSTJPO
1SFQBSFEPDLFSGJMFT
[app/Dockerfile
]

version: "3
"

services
:

app
:

build: ./ap
p

volumes
:

- ./app:/usr/src/ap
p

ports
:

- "4000:4000
"

stdin_open: tru
e

tty: tru
e

command: sh -c "mix phx.server --no-halt
"

View Slide

% docker compose build
"GUFSQSFQBSFEEPDLFSGJMFT
MFU`TFYFDVUF
AEPDLFSDPNQPTFCVJMEA
&YFDVUFAEPDLFSDPNQPTFCVJMEA

View Slide

% docker compose run app mix phx.new . --app kokuraex —no-ect
o

…

The directory /usr/src/app already exists. Are you sure you
want to continue? [Yn]
y

…

Fetch and install dependencies? [Yn]
y

…
"GUFSEPOFPGAEPDLFSDPNQPTFCVJMEA JOTUBMM1IPFOJY

View Slide

% tree -L
2

.

├── README.m
d

├── ap
p

│ ├── Dockerfil
e

│ ├── README.m
d

│ ├── _buil
d

│ ├── asset
s

│ ├── confi
g

│ ├── dep
s

│ ├── li
b

│ ├── mix.ex
s

│ ├── mix.loc
k

│ ├── pri
v

│ └── tes
t

└── docker-compose.ym
l

…

We are almost there! The following steps are missing
:

$ cd
.

Start your Phoenix app with
:

$ mix phx.serve
r

You can also run your app inside IEx (Interactive Elixir)
as
:

$ iex -S mix phx.server
8FTBXUIFGPMMPXJOHNFTTBHF BOEDPOHSBUVMBUJPOT
UIFJOTUBMMBUJPOXBTDPNQMFUFE
"OEBUUIFNPNFOU UIFEJSFDUPSZUSFFJTTIPXOPO
UIFSJHIU

View Slide

"GUFS1IPFOJYJOTUBMMBUJPO
GJY*1UPl zGPSEFWFYTGJMFCZVQEBUFBTCFMMPX
[app/config/dev.exs
]

config :kokuraex, KokuraexWeb.Endpoint
,

# Binding to loopback ipv4 address prevents access from other machines
.

# Change to `ip: {0, 0, 0, 0}` to allow access from other machines
.

- http: [ip: {127, 0, 0, 1}, port: 4000]
,

+ http: [ip: {0, 0, 0, 0}, port: 4000]
,

View Slide

/PX XFFYFDVUFEPDLFSDPNQPTFVQBOE
MPPLMPDBMIPTUJOCSPXTFS

View Slide

:FT XFEJEJU
8FHPUUIFQSPPGUIBUUIFTDSFFO
TIPXFEVQl8FMDPNFUP1IPFOJYz
5IFGJSTUNJTTJPOXBTDPNQMFUFE

View Slide

$IBQUFS
"EBQU$44MBZPVUCZ
5BJMXJOE$44

View Slide

5PQSFQBSFUIFMBZPVUXJUIFBTF XFXJMMVTF
5BJMXJOE$44
*OUIJTTFDUJPO XFXJMMGPDVTPOUIFTFUVQBOE
JOUSPEVDUJPOPG5BJMXJOEJNQMFNFOUBUJPO
8FXJMMBMTPFYQMBJOXFCTJUFDPOUFOUDSFBUJPO
BOEQBHFUSBOTJUJPOT CVUXFXJMM/05FYQMBJO
NVDIBOETLJQBCPVUNBSLVQ UFTUT BOEPUIFS
JNQMFNFOUBUJPOEFUBJMT
4UFQT
*OTUBMM/PEFKT
1SFQBSF5BJMXJOE$44FOWJSPONFOU
1SFQBSFFBDISPVUFQBHFBOENBSLVQ
4FUUBJMXJOEDMBTTJOMJOFDPEF

View Slide

5IFNBJOSFBTPOJTUIBUCZ
BEPQUJOH5BJMXJOE$44 B
VUJMJUZGJSTU$44GSBNFXPSL
XFXJMMCFBCMFUPNBLFHPPE
QSPHSFTTJOPVSNJTTJPOUP
RVJDLMZTFUMBZPVUTUZMFT
XJUIPVUXSJUJOHSBX$44
8IZXFDIPJDF5BJMXJOE$44
IUUQTUBJMXJOEDTTDPN

View Slide

5BJMXJOE$44SFRVJSFTUIFFOWJSPONFOUPG
/PEFKT CVUPVS1IPFOJYWFSTJPOQSPKFDU
EPFTOPUIBWFUIFPOFZFU
4P XFNVTUBEEUIFTUFQPGJOTUBMMBUJPO/PEFKT
JO%PDLFSGJMF
*OUIJTUBML XFVTFOQNQBDLBHFOUPJOTUBMM
/PEFKTBOENBOBHFUIFWFSTJPOT
5IFSFJTBMTPBSFBTPOXIZ*XBOUUPTQFDJGZ
FWFONJOPSWFSTJPOTPG/PEFKTBOEBWPJE
QSPCMFNTDBVTFECZWFSTJPOEJGGFSFODFT
"GUFSJOTUBMMJOH/PEFKT XFSFCVJMEDPOUBJOFST
BHBJOXJUIbEPDLFSDPNQPTFCVJME`
*OTUBMM/PEFKT
(for confirmation
)

% docker compose exec app node -
v

v16.9.1
/05&O OQNQBDLBHF

IUUQTXXXOQNKTDPNQBDLBHFO
[app/Dockerfile
]

…

+ RUN apt-get install -y nodejs np
m

+ RUN npm install -g
n

+ RUN n 16.9.
1

+ RUN apt-get purge -y nodejs np
m

RUN apt-get clea
n

…
% docker compose build

View Slide

'PSTFUVQ5BJMXJOE$44TNPPUI XFTJNQMZ
DIPPTFIFYQBDLBHF lQIY@HFO@UBJMXJOEz
5IJTCVJMETVQ5BJMXJOE$44EFWFMPQNFOU
FOWJSPONFOUUPBOFX1IPFOJYBQQMJDBUJPO
OJDFBOERVJDLMZ
#JHUIBOLTUPUIFIFYQSPKFDUPXOFS ,FWJO
-BOH

5IFGJSTUTUFQUPEPJTUPTUPQSVOOJOH
DPOUBJOFSTBOEUIFOVQEBUFNJYFYTBTTIPXO
POUIFSJHIU
"GUFSUIBU XFEPNJYEFQTHFUBOEDPNQJMF
% docker compose run app mix deps.compile
/05&QIY@HFO@UBJMXJOE
)FY
IUUQTIFYQNQBDLBHFTQIY@HFO@UBJMXJOE
(JU)VC
IUUQTHJUIVCDPNLFWJOMBOHQIY@HFO@UBJMXJOE
[app/mix.exs
]

defp deps d
o

[

..
.

- {:plug_cowboy, "~> 2.5"
}

+ {:plug_cowboy, "~> 2.5"}
,

+ {:phx_gen_tailwind, "~> 0.1.3"
}

]

end
% docker compose run app mix deps.get

View Slide

5IFOFYFDVUFUIFDPNNBOEAEPDLFSDPNQPTFSVO
BQQNJYQIYHFOUBJMXJOEA
/PXXFBSFSFBEZUPJNQMFNFOU$44XJUI5BJMXJOE
5IFNBJOGJMFTXIFSFUIFEJGGFSFODFTPDDVSSFEBSF
TIPXOPOUIFSJHIU
*GXFXBOUUPLOPXNPSFBCPVUQIY@HFO@UBJMXJOE
UIF(JU)VCBOE)FYEPDVNFOUTBUUIF63-POUIF
SJHIUXJMMIFMQVT
0GDPVSTF XFXJMMBMTPGJOEUIFPGGJDJBM5BJMXJOE$44
EPDVNFOUBUJPOWFSZIFMQGVM
IUUQTUBJMXJOEDTTDPNEPDTJOTUBMMBUJPO

1SFQBSF5BJMXJOE$44FOWJSPONFOU % docker compose run app mix phx.gen.tailwin
d

* creating assets/package.jso
n

* creating assets/tailwind.config.j
s

* injecting assets/css/app.cs
s

* injecting config/dev.ex
s

* injecting mix.ex
s

* injecting assets/js/app.j
s

NPM install new dependencies? [Yn]
y

* running cd assets/ && npm install
mainly dif
f

modified: app/assets/css/app.cs
s

modified: app/assets/js/app.j
s

modified: app/config/dev.exs
/05&QIY@HFO@UBJMXJOE
)FY
IUUQTIFYQNQBDLBHFTQIY@HFO@UBJMXJOE
(JU)VC
IUUQTHJUIVCDPNLFWJOMBOHQIY@HFO@UBJMXJOE

View Slide

/PXMFU`TTUBSUSFSVOOJOHDPOUBJOFSTCZ
AEPDLFSDPNQPTFVQABOEDIFDLSFTVMUTJO
PVSCSPXTFS
8JUIUIFJNQMFNFOUBUJPOFOWJSPONFOUPG
5BJMXJOE$44JOQMBDF UIFEFGBVMU$44TUZMF
PG1IPFOJYIBTCFFOSFNPWFE
/PXMFUTUSZPOFJNQMFNFOUBUJPOPG5BJMXJOE
$44GSPNUIJTTUBUF

View Slide

"EEUIFDMBTTFTQSFQBSFECZ5BJMXJOE$44JOUIFIUBHCZ
JOMJOFTUZMF
5IJTNBHJDIBTUIFFGGFDUPGDPOWFSUJOHUIFGPOUXFJHIU GPOU
TJ[F BOEDPMPSPGGPOUTUPXIBUFWFSXFXBOU
*GXFXBOUUPLOPXNPSFBCPVUXIJDIDMBTTEPFTXIBU JUJT
SFDPNNFOEFEUPTFFUIF5BJMXJOE$44DIFBUTIFFU63-
'PSFYBNQMF UIFSFJTBDIFBUTIFFUUIBUMPPLTMJLF
lUBJMXJOEDPNQPOFOUTDPNz
IUUQTUBJMXJOEDPNQPOFOUTDPNDIFBUTIFFU

[app/lib/kokuraex_web/templates/page/index.html.heex
]

>

- <%= gettext "Welcome to %{name}!", name: "Phoenix" %>>

+ <%= gettext "Welcome to %{name}!",
name: "Phoenix" %>>

Peace of mind from prototype to production

View Slide

/PX XFXJMMTUBSUJNQMFNFOUJOHUIFDPOUFOUTFUVQBOE
QBHFUSBOTJUJPOTGPSPVSXFCTJUF LPLVSBFY
1BHFUSBOTJUJPOTBSFTIPXOCFMPX BOEUIF
JNQMFNFOUBUJPOJTEPOFBTTIPXOPOUIFSJHIU
5IFFYBNQMFTIPXOIFSFJTGPSUIFBCPVUQBHF CVUUIF
JNQMFNFOUBUJPOGPSUIFFWFOUQBHFDBOCFEPOFJOUIF
TBNFXBZ 3FQMBDFBCPVUXJUIFWFOUBOEDMPOFJU

1MFBTFOPUFUIBUXFXJMMOFFEUPTUPQBOESFTUBSUUIF
DPOUBJOFSBTOFFEFE
(page transitions
)

hom
e

!"" abou
t

#"" event
(New file
)

[app/lib/kokuraex_web/templates/about/index.html.heex
]

About
[app/lib/kokuraex_web/router.ex
]

…

get "/", PageController, :inde
x

+ get "/about", AboutController, :inde
x

end
(New file
)

[app/lib/kokuraex_web/controllers/about_controller.ex
]

defmodule KokuraexWeb.AboutController d
o

use KokuraexWeb, :controlle
r

def index(conn, _params) d
o

render(conn, "index.html"
)

en
d

end
(New file) [app/lib/kokuraex_web/views/about_view.ex
]

defmodule KokuraexWeb.AboutView d
o

use KokuraexWeb, :vie
w

end

View Slide

-FUTUBLFBMPPLBUUIFlBCPVUzQBHF
XIJDIIBTKVTUCFFOCPSO
*UJTJOBQMBJOTUBUFXJUIOP$44DMBTTFT
BQQMJFEZFU
'SPNIFSF XFDSFBUFUIFDPOUFOU
JODMVEJOHUFYUBOEJNBHFT UPTFUUIF
MBZPVU
8FXPOUHPJOUPUIFEFUBJMTIFSF
5IFTPVOEPGBDMPDLUJDLJOHXIJMF
NBSLVQJTCFJOHEPOFʜ

(localhost:4000/about)

View Slide

*XJMMDBTUB
5BJMXJOE$44TQFMMʜ

View Slide

8FXJMMMFUZPVLOPXUIFSFTVMUTTPPOMBUFS
-FUTMPPLGPSXBSEUPJU

View Slide

$IBQUFS
1VUJUPO)FSPLVUPSFMFBTF
UIFXFCTJUFUPUIFQVCMJD

View Slide

)FSPLVJTBOJDF1BB4GPSFBTZ
BQQMJDBUJPOSFMFBTF
*UTVQQPSUT&MJYJS PGDPVSTF
0VSXFCTJUFJTCVJMUPOEPDLFS BOEXF
XJMMUSZUPEFQMPZJUVTJOH)FSPLVT
DPOUBJOFSSFHJTUSZTZTUFN
4UFQT
8IZEJEXFDIPPTF)FSPLV
4FUVQPG1IPFOJYGPSSFMFBTF
4FUVQPG)FSPLV
%FQMPZ

View Slide

*UTCFDBVTF JOBOVUTIFMM
XF`SFVTFEUPVTJOH)FSPLV1BB4
4P MFU`TTUBSUUIFTFUVQ

View Slide

4FUVQJOQSPHSFTTʜʜ

View Slide

4FUVQJOQSPHSFTTʜʜ
0I OP

View Slide

)FZ XBJUBNJOVUF
*UIJOL*DBVHIUBHMJNQTFPGB1BB4UIBU
MPPLTHPPE

View Slide

IUUQTGMZJP

View Slide

l'MZJPz
0I EFBS
/P *EJEOUTFFBOZUIJOH
*WFBMSFBEZTUBSUFEUPCVJMEJUPO)FSPLV
TP*MMSFMFBTFJUUIFSFBOEUIFOCVJMEJUBHBJOPO
'MZJPʜ

View Slide

5IFTFDSFULFZHFOFSBUFECZUIJTTUFQJTUIF
POFXFMMOFFEUPEFQMPZUP)FSPLVMBUFS
.BLFBOPUFPGJUTPNFXIFSF TPXFEPOU
MPTFJU 5IJTJTDPOGJEFOUJBMJOGPSNBUJPO
1MFBTFEPOUSFWFBMJUUPBOZPOF

"MTP VQEBUFPVS%PDLFSGJMFBOESFMFWBOU
GJMFTBTTIPXOPOUIFSJHIU
[app/config/prod.exs
]

…

,

- url: [host: "example.com", port: 80]
,

+ http: [port: System.get_env("PORT")]
,

+ url: [scheme: "https", host: "kokura-ex.herokuapp.com", port: 443]
,

+ force_ssl: [rewrite_on: [:x_forwarded_proto]]
,

…
[app/Dockerfile
]

FROM elixir:1.12.2-sli
m

+ ENV MIX_HOME=/root/.mix
\

+ MIX_ENV=prod
\

+ SECRET_KEY_BASE=${SECRET_KEY_BASE}
\

+ PORT=400
0

+ COPY . /usr/src/ap
p

WORKDIR /usr/src/app
"OZXBZ MFUTHPCBDLBMJUUMFCJU
BOETUBSUXJUIUIFTFUVQJO1IPFOJYGPSSFMFBTF
8FGJSTUOFFEUPDSFBUFBTFDSFULFZCZSVOOJOHUIF
DPNNBOEAEPDLFSDPNQPTFSVOBQQNJY
QIYHFOTFDSFUA
% docker compose run app mix phx.gen.secret
[app/config/config.exs
]

# Configures the endpoin
t

,

url: [host: "localhost"]
,

+ secret_key_base: System.get_env("SECRET_KEY_BASE")
,

…

View Slide

(New file) [heroku.yml
]

build
:

docker
:

web: app/Dockerfile
[docker-compose.yml
]

…

+ environment:SECRET_KEY_BASE=“TooLongStrings………
”

stdin_open: tru
e

tty: tru
e

command: sh -c "mix phx.server —no-halt"
1MFBTFOPUFUIBUUIFTFDIBOHFTNBZQSFWFOUPVSMPDBM
%PDLFSEFWFMPQNFOUFOWJSPONFOUGSPNSVOOJOHQSPQFSMZ
*GTP XFTIPVMEUBLFUIFGPMMPXJOHTUFQT
3FXSJUFEPDLFSDPNQPTFZNMBTTIPXOPOUIFSJHIU
XJUI4&$3&5@,&:@#"4&CFJOHBMPOHEVNNZUFYUPG
ZPVSDIPJDF
8FDBOBMTPSFNPWFUIFATFDSFU@LFZ@CBTFAMJOFGSPN
BQQDPOGJHEFWFYT
*OUIFGVUVSF JUXPVMECFOJDFUPIBWFUXP%PDLFSGJMFT
POFGPSEFWFMPQNFOUBOEPOFGPSSFMFBTF
8FPNJUBOFYQMBOBUJPOPGUIBUIFSF
0PQT XFGPSHPUPOFNPSFJNQPSUBOUUIJOH
8FTIPVMEDSFBUFBIFSPLVZNMGJMFBOEQVUJUJOUIFSPPU
PGPVSQSPKFDUEJSFDUPSZ
[app/config/dev.exs
]

…

code_reloader: true
,

debug_errors: true
,

- secret_key_base: “LongPreWrittenWtrings……………
”

watchers:
[

…

View Slide

/PUF
8FXJMMOPUFYQMBJOIPXUPDSFBUFB)FSPLVBDDPVOUIFSF*GZPVIBWFOUDSFBUFEBO
BDDPVOUZFU QMFBTFSFGFSUPUIFPGGJDJBMXFCTJUFGPSFBTZUPGPMMPXJOTUSVDUJPOTUPHFU
SFBEZ
IUUQTEFWDFOUFSIFSPLVDPNDBUFHPSJFTCJMMJOH
*UJTCFTUJGZPVBMTPJOTUBMM)FSPLV$PNNBOE-JOF*OUFSGBDF )FSPLV$-*
)FSPLV
$-*NBLFTJUFBTZUPNBOBHF)FSPLVBQQTEJSFDUMZGSPNUIFUFSNJOBM5IFJOTUBMMBUJPO
QSPDFTTJTIFSF
IUUQTEFWDFOUFSIFSPLVDPNBSUJDMFTIFSPLVDMJ
4FUVQPG)FSPLV
/PXJUTUJNFUPTFUVQ)FSPLV
-FU`TMPHJOUP)FSPLVGSPNUIFUFSNJOBM % heroku login

View Slide

/PX MFUTDSFBUFB)FSPLVQSPKFDUCZFYFDVUJOHUIF
DPNNBOEAIFSPLVDSFBUFBXFTPNFBQQOBNFA
*OUIFBXFTPNFBQQOBNFGJFME XFTIPVMEFOUFS
UIFOBNFPGUIFBQQMJDBUJPOOBNFXFXBOU"OE
UIJTTUSJOHXJMMCFEJSFDUMZJODPSQPSBUFEBTQBSUPG
UIFBQQMJDBUJPO`TQVCMJD63-
"UUIFTBNFUJNF JUXJMMSFHJTUFSPVS)FSPLV
SFQPTJUPSZUPUIFHJUSFNPUFSFQPTJUPSZ$IFDLJU
PVUJOUIFAHJUSFNPUFADPNNBOE
8FMMBMTPOFFEUPBEEUIFTFDSFULFZXFDSFBUFE
FBSMJFSUPUIF)FSPLVFOWJSPONFOUWBSJBCMFT
-FU`TSFHJTUFSCZFYFDVUJPOUIFDPNNBOEAIFSPLV
DPOGJHTFU4&$3&5@,&:@#"4&YYYYYYYYYYYYA
4FUVQPG)FSPLV
% heroku create kokura-e
x

Creating ⬢ kokura-ex... don
e

https://kokura-ex.herokuapp.com/ | https://
git.heroku.com/kokura-ex.git
% heroku config:set SECRET_KEY_BASE=xxxxxx
x

Setting SECRET_KEY_BASE and restartin
g

…

View Slide

/PXMFUTHFUSFBEZUPEFQMPZB%PDLFSCBTFE
QSPKFDUCZVTJOHUIF)FSPLV$POUBJOFS
3FHJTUSZNFDIBOJTN
'PSBNPSFEFUBJMFEFYQMBOBUJPOPGUIF)FSPLV
$POUBJOFS3FHJTUSZ JUXPVMECFBHPPEIFMQFS
UPSFBEUIFPGGJDJBMEPDVNFOUBUJPO IUUQT
EFWDFOUFSIFSPLVDPNBSUJDMFTDPOUBJOFS
SFHJTUSZBOESVOUJNF

)FSF XFXJMMGPDVTPOUIFFYFDVUJPOTUFQT
)PXFWFS JUJTWFSZFBTZUPEP TPMFUTSVOUIF
DPNNBOEPOUIFSJHIU
4FUVQPG)FSPLV
% heroku container:logi
n

Login Succeeded
% heroku stack:set containe
r

Setting stack to container... done

View Slide

&OTVSFUIBUPVSDPEFJTBMMHJUDPNNJUUFE BOEUIFO
SVOUIFDPNNBOEAHJUQVTIIFSPLV
NZ@CSBODINBJOA
5IJTXJMMQVTIPVSGJMFT JODMVEJOHIFSPLVZNM UPUIF
SFNPUFSFQPTJUPSZPG)FSPLV
/PUFUIBUXFSFQMBDFUIFMFUUFSTlNZ@CSBODIzXJUI
UIFOBNFPGUIFCSBODIXFSFXPSLJOHPO*O
EFUBJM UPEPBUSJBMQVTIUP)FSPLVXIFOXFSFJO
UIFEFWFMPQNFOUHJUCSBODI XFOFFEUPTQFDJGZ
TPNFUIJOHMJLFzNZ@CSBODINBJOz
0ODFXFWFEPOFUIJT NPWFUPUIFBQQEJSFDUPSZ
BOEJUTUJNFGPSUIFQSPEVDUJPOSFMFBTFUJNF
3VOAIFSPLVDPOUBJOFSQVTIXFCABOEAIFSPLV
DPOUBJOFSSFMFBTFXFCA
%FQMPZ
% cd ap
p

% heroku container:push we
b

…

Your image has been successfully
pushed. You can now release it with
the 'container:release' command
.

$ heroku container:release we
b

Releasing images web to phx-
containers... done
% git push heroku my_branch:main

View Slide

6OGPSUVOBUFMZ JGUIBUEPFTOUXPSL XIBUEPXFEP
5IFDPNNBOEAIFSPLVMPHTUBJMAXJMMIFMQVT
$IFDLPVSMPHTBOEUSZUPTPMWFUIFQSPCMFN
5IFDBVTFPGUIFFSSPSNJHIUCF GPSFYBNQMF
:PVNJHIUOPUMPHJOUP)FSPLVCZAIFSPLVDPOUBJOFSMPHJOA
TPUIFFSSPSBSPVOEBVUIJOUFSDFQUFEZPV
:PVNJHIUPNJUUIFFOWJSPONFOUWBSJBCMFTSFMBUFEUP
)FSPLV FJUIFSPO)FSPLVPSJOPVS%PDLFSGJMF
:PVNJHIUGPSHFUUPHJUQVTI)FSPLVUIFDIBOHFEGJMFT
8FXJMMBTTVNFUIBUFWFSZUIJOHXFOUXFMMIFSF
/PX MFUTTFFUIFTJUFQVCMJTIFEGPSUIFXPSMEUPTFF
8FDBOSVOUIFAIFSPLVPQFOADPNNBOEUPEJTQMBZ
UIFTJUFJOUIFCSPXTFS0QFO4FTBNF
%FQMPZ
% heroku logs --tail
% heroku open

View Slide

%FQMPZ
-FUTMPPLGPSXBSEUPJU
cEFKBWV%

View Slide

$IBQUFS
4FUVQ$*BOE$%CZVTJOH
$JSDMF$*

View Slide

'PSUIFDPODMVEJOHQBSUPGUIJTUBML XFMMCVJMEUIF
$*BOE$%QJQFMJOF
5IF$*BOE$%QJQFMJOFXJMMCSJOHUPNBLF
PQFSBUJPOTFBTJFSGPSVT*OUIJTDBTF XFXJMMCVJME
UIF$*BOE$%QJQFMJOFCZVTJOH$JSDMF$*WJB
(JU)VC
5IJTTFDUJPOXJMMNBJOMZGPDVTPOUIFFYQMBJOJOHUIF
GMPXPGUIF$*BOE$%QJQFMJOFXFCVJMU CVUXFXJMM
/05FYQMBJONVDIBOETLJQEFUBJMFEFYQMBOBUJPOPG
$JSDMF$* (JU)VC BOE$*$%UIFNTFMWFT
4UFQT
1SFQBSFDJSDMFDJDPOGJHZNMJOMPDBM
4FU$JSDMF$*FOWJSPONFOU
&YFDVUFUIF$*BOE$%QJQFMJOF

View Slide

4P XFXJMMHPUISPVHIUIFQSPDFTTTUFQCZTUFQ CVUXFXJMM/05FYQMBJOIPX
UPDSFBUFB$JSDMF$*BDDPVOU
'VSUIFSNPSF XFVTF(JU)VC CVUXFEP/05FYQMBJOIPXUPDPOOFDUUIF
SFNPUFSFQPTJUPSZUPUIF$JSDMF$*TJEFJOEFUBJM
8FDBOGJOEEFUBJMFEJOTUSVDUJPOTPOUIFTFUPQJDTPO$JSDMF$*`TPGGJDJBMXFCTJUF
)FSFJTUIF63-GPSUIPTF
DJSDMFDJ%PDT:PVS'JSTU(SFFO#VJME
IUUQTDJSDMFDJDPNEPDTHFUUJOHTUBSUFE
$JSDMF$*IBTHPPEUFDIOJDBMEPDVNFOUBUJPO TPXFDBOGJOEPVUBOETPMWFNPTU
QSPCMFNTCZSFBEJOHUIFJSEPDVNFOUBUJPO

View Slide

(New file) [circleci/config.yml
]

version: 2.
1

executors
:

machine-executor
:

machine
:

image: ubuntu-2004:202107-0
2

orbs
:

heroku: circleci/[email protected].
6

workflows
:

version:
2

build-deploy
:

jobs
:

- buil
d

- deploy
:

requires
:

- buil
d

filters
:

branches
:

only: mai
n

jobs
:

(Continue to next page)
-FUTTUBSUCZXSJUJOHDPEFJOUPUIFDJSDMFDJDPOGJHZNMGJMF
5IFNBJOQPJOUTPGUIFQSPDFTTGMPXBSFBMTPEFTDSJCFEJOFBDITFDUJPO
8FXJMMBMTPJODMVEFSFGFSFODF63-T
FYFDVUPST
#ZBQQMZJOH.BDIJOFUPUIF&YFDVUPSUZQF XFSVOUIFKPCJOB-JOVY7.
JNBHF 6CVOUV
*OBEEJUJPO UIF.BDIJOF&YFDVUPSHJWFTVTGVMMBDDFTTUP
UIF%PDLFSQSPDFTT5IJTBMMPXTVTUPCVJMEBOESVODVTUPN%PDLFS
DPOUBJOFST
6TJOHNBDIJOFIUUQTDJSDMFDJDPNEPDTFYFDVUPSUZQFTVTJOH
NBDIJOF

PSCT
5PFBTJMZTFUVQUIF)FSPLVEFQMPZNFOUQSPDFTT XFBSFVTJOH$JSDMF$*T
)FSPLV0SC
$JSDMF$*0SCJTBTIBSBCMFPQFOTPVSDFQBDLBHFUIBUCSJOHTUPHFUIFS
CVJMEJOHCMPDLTUIBUNBLFJURVJDLBOEFBTZUPJOUFHSBUFBOEQSPDFTT
EJGGFSFOUTFSWJDFT
0SCDJSDMFDJIFSPLV
IUUQTDJSDMFDJDPNEFWFMPQFSPSCTPSCDJSDMFDJ
IFSPLV
XPSLGMPXT
0ODFUIFDPOUBJOFSJNBHFIBTCFFOCVJMUCZUIFlCVJMEKPCzBOE
TVCTFRVFOUMZNFSHFEJOUPUIFNBJOSFQPTJUPSZ UIFEFQMPZNFOUQSPDFTTJT
FYFDVUFE5IFJNQMFNFOUBUJPOJTSFGMFDUFEJOUIFQSPEVDUJPOFOWJSPONFOU

View Slide

(Continued from previous page
)

jobs
:

build
:

executor
:

name: machine-executo
r

steps
:

- checkou
t

- run
:

name: Build Docker container
s

command:
|

set -
x

docker-compose buil
d

- run
:

name: Mix deps.get & compil
e

command:
|

set -
x

docker-compose run app bash -c "mix deps.get
"

docker-compose run app bash -c "mix compile"
*OUIFCVJMEKPCTUFQ WBSJPVTCVJMEPQFSBUJPOTBSF
FYFDVUFEBTUIFOBNFTVHHFTUT*OUIJTTUFQ UFTUJOH
BOEGPSNBUUJOHDIFDLTBSFBMTPDBSSJFEPVUEVSJOHUIJT
TUBHFPGUIFQSPDFTT
'PSSFBTPOTPGQBQFSTQBDF TPNFJOEFOUBUJPOJOUIF
ZNMGJMFIBTCFFOPNJUUFE

1SFQBSFDJSDMFDJDPOGJHZNMJOMPDBM - run
:

name: Npm install in assets director
y

command:
|

set -
x

docker-compose run app bash -c "cd assets && npm i
"

- run
:

name: Mix forma
t

command:
|

set -
x

docker-compose run app bash -c "mix format --check-formatted
"

- run
:

name: Mix tes
t

command:
|

set -
x

docker-compose run app bash -c "MIX_ENV=test mix test
"

- run
:

name: Compile asset
s

command:
|

set -
x

docker-compose run app bash -c "MIX_ENV=prod mix assets.deploy
"

- run
:

name: Mix releas
e

command:
|

set -
x

docker-compose run app bash -c "MIX_ENV=prod mix release
"

- run
:

name: Run Docker container
s

command:
|

set -
x

docker-compose up -
d

sleep
1

docker ps -f status=runnin
g

docker-compose log
s

- persist_to_workspace
:

(Continue to next page)

View Slide

(Continued from previous page
)

- persist_to_workspace
:

root:
.

paths
:

- ./app/dep
s

- ./app/_buil
d

- ./app/pri
v

- ./app/assets
/

- run
:

name: Finish buil
d

command:
|

set -
x

echo "Finish build"
QFSTJTU@UP@XPSLTQBDF JOUIFCVJMEKPC

'JMFTEJSFDUPSJFTSFRVJSFEGPSEFQMPZNFOUBSF
TIBSFEWJBl8PSLTQBDFzCFUXFFOUIFCVJMEBOE
EFQMPZKPCT
EFQMPZ
5IJTJTXIFSFUIFQSPDFTTPGEFQMPZJOHUP)FSPLV
UBLFTQMBDF5IFFOWJSPONFOUWBSJBCMFTFUUJOHFUD
BSFEFTDSJCFEMBUFS
deploy
:

executor
:

name: machine-executo
r

steps
:

- checkou
t

- attach_workspace
:

at:
.

- run
:

name: Check directories/file
s

command:
|

set -
x

pwd && ls -a && ls ap
p

- heroku/instal
l

- heroku/check-authenticatio
n

- run
:

name: Heroku container login, push, releas
e

working_directory: ap
p

command:
|

set -
x

ls -
a

heroku container:logi
n

heroku container:push web -a $HEROKU_APP_NAM
E

heroku container:release web -a $HEROKU_APP_NAM
E

- run
:

name: Finish deplo
y

command:
|

set -
x

echo "Finish deploy"

View Slide

% heroku authorizations:creat
e

Creating OAuth Authorization... don
e

..
.

Token: LongStringsFooBarrrrrrrrrrrrr
r

Updated at: ...
(PJOUPPVSQSPKFDUT$JSDMF$*EBTICPBSEBOETFU5XP
FOWJSPONFOUWBSJBCMFT
'PSEFUBJMFEJOTUSVDUJPOTPOIPXUPEPUIJT XFDBOSFBE
UIFPGGJDJBMEPDVNFOUBUJPOIFSF
IUUQTDJSDMFDJDPNEPDTFOWWBSTTFUUJOHBO
FOWJSPONFOUWBSJBCMFJOBQSPKFDU
)&30,6@"11@/".&
5IJTJTUIFOBNFPGPVS)FSPLVBQQMJDBUJPOUIBUXBT
EFDJEFECZUIFAIFSPLVDSFBUFADPNNBOE
)&30,6@"1*@,&:
&OTVSFXFHFUUIFBVUIFOUJDBUJPOUPLFOXJUIUIF
DPNNBOEAIFSPLVBVUIPSJ[BUJPOTDSFBUFA BOESFHJTUFS
UIFHFOFSBUFEUPLFOUPPVSQSPKFDUT$JSDMF$*EBTICPBSE
BT)&30,6@"1*@,&:
4FU$JSDMF$*FOWJSPONFOU

View Slide

/PXXFGJOBMMZIBWFBQJQFMJOFUIBU
VQEBUFTPVSQSPEVDUJPOFOWJSPONFOUXJUI
KVTUBHJUQVTI
5IFEFQMPZQJQFMJOFJTBMNPTUGJOJTIFE BOE
UIFHSFFOMJHIUIBTCFFOUVSOFEPO
5BEB
/PX BMMXFIBWFUPEPJTHJUQVTIUPUIFSFNPUF(JU)VCSFQPTJUPSZ
8IFOXFQVTIUPBEFWFMPQNFOUCSBODI POMZUIFCVJMEKPCSVOT
0ODFUIFCVJMEJTDPNQMFUF XFDBONFSHFJUJOUPPVSNBJOSFQPTJUPSZ"GUFSXFEJEUIFNFSHF
PQFSBUJPO CPUICVJMEBOEEFQMPZKPCTBSFSVOOJOH

View Slide

-FUTMPPLGPSXBSEUPJUʜ

View Slide

-FUTMPPLGPSXBSEUPJUʜ
/P XFSFOPUɹ/PXJTUIFSJHIUUJNF
5IFUJNFIBTDPNF

View Slide

5IJTJTJU

View Slide

5IJTJTJU
IUUQTLPLVSBFYIFSPLVBQQDPN

View Slide

:FBI
8FEJEJU

View Slide

5IFGJSTUHPBMXFTFU
XFXFSFBCMFUP
BDDPNQMJTITNPPUIMZ

View Slide

"OEXFIPQFUPHSPX
JUJOUIFGVUVSF

View Slide

*JNBHJOFTVDI
BGVUVSFUFDINFFUVQ
3FBMUJNFDPEF
TIBSJOH
&WFOUOPUJGJFS
#MPH
$IBUUJOH
FUDʜ
( ´ʔ`)ɻоʢ

View Slide

3FBMUJNFʜ
0GDPVSTF -JWF7JFX
3JHIU

View Slide

8JUI-JWF7JFX JUXJMMCFFBTZBOE
TNBSUUPDSFBUFSFBMUJNFDPEF
TIBSJOH XPOUJU

View Slide

*DBOUTUPQESFBNJOH

View Slide

"MMSJHIU *`MMSFMFBTFBMPUPGGFBUVSFTJOUIF
1IPFOJYGSBNFXPSL
-FUTEPJU
*MPWF1IPFOJY
*MPWF&MJYJS
*MPWFGMZJP *IBWFOUVTFEJUZFUʜ

View Slide

*NBHJOBUJPOJTUIFPOMZXFBQPO
JOUIFXBSBHBJOTUSFBMJUZ
*TOUUIBUSJHIU $IFTIJSF$BU

View Slide

"OE PIGSJFOET
XFBSFBMM"MJDF XIPVTFT&MJYJSUP
SFGJOFPVSJNBHJOBUJPOBOESJEF
UIF1IPFOJYGSPNUIFMBOEPG
JNBHJOBUJPOUPUIFSFBMXPSMEBU
XJMM

View Slide

LPLVSBFY0SHBOJ[FS
3ZPUBSP*NBIBTIJ !JN@NJPMBC

'JO
5IBOLZPVGPSXBUDIJOH
5IBOLZPVWFSZNVDI

View Slide

How do we casually create an Elixir community website with Phoenix?

How do we casually create an Elixir community website with Phoenix?

Ryotaro Imahashi

Other Decks in Technology

Featured

Transcript