d67c36e5d6 · cmc/cleberg.net

1

#+title: Using Docker Desktop to Create a Development Web Server

2

#+date: <2024-04-08 Mon 10:05:45>

3

#+description: Learn how to launch local web servers with Docker Desktop.

4

#+filetags: dev, nginx

5

#+slug: docker-local-web-server

6

7

When developing websites locally, I often use a simple Python web server to

8

observe the changes.

9

10

#+begin_src shell

11

python3 -m http.server

12

#+end_src

13

14

However, this approach has its limitations. For example, this approach does not

15

enable logging or access controls. You also need to customize =SimpleHTTPServer=

16

if you have advanced needs from your web server.

17

18

So, I went to find an alternative that is almost as easy and far more extensible

19

and found Docker Desktop to be a suitable replacement.

20

21

* Docker Desktop

22

23

** Installation

24

25

[[https://www.docker.com/products/docker-desktop/][Docker Desktop]] is a desktop GUI for the phenomenal Docker container software.

26

This allows you to manage containers, images, volumes, environments, and

27

extensions via an easy-to-use GUI.

28

29

To install, open the link above and click the =Download= button for your

30

platform. I'm going through this process on an M2 Macbook, so I downloaded the

31

Mac - Apple Chip version.

32

33

Open the installer and follow the installation process until the application

34

finishes the installation process.

35

36

#+caption: Docker Desktop on macOS

37

[[https://img.cleberg.net/blog/20240408-docker-local-web-server/docker-desktop.png]]

38

39

** Creating an Nginx Container

40

41

I prefer to use the command line to create containers, so the following commands

42

will be input via the terminal.

43

44

The following command will create a container, using the =nginx= image:

45

46

1. =-d=: Run this container as a daemon (detach)

47

2. =-p=: Allocate a port in the format =<external>:<internal>=

48

3. =-i=: Keep STDIN open even if not attached

49

4. =-t=: Allocate a pseudo-TTY

50

5. =-p=: Allocate a port in the format =<external>:<internal>=

51

6. =--rm=: Remove the container once it's done running

52

53

#+begin_src shell

54

docker run -it --rm -d -p 8000:80 --name web nginx

55

#+end_src

56

57

You can navigate to [[http://localhost:8000]] to see the resulting page.

58

59

#+caption: Default Nginx Container

60

[[https://img.cleberg.net/blog/20240408-docker-local-web-server/default-container.png]]

61

62

** Customizing the Nginx Container

63

64

Now that I have a container running the Nginx web server, I need to link some

65

volumes so that I can modify the site configuration and provide the web files to

66

serve.

67

68

Let's start with the new command, which adds two volumes:

69

70

1. =<your_content>:/usr/share/nginx/html=: This is the directory where you will

71

provide the web pages for the server to serve.

72

2. =<your_config>:/etc/nginx/conf.d/default.conf=: This is the Nginx

73

configuration file for your site.

74

75

To see the updates, you can delete the previous container in the GUI or run

76

=docker stop web= to stop the container. Once stopped, you can run the new

77

=docker run= command below.

78

79

#+begin_src shell

80

docker run -it -d -p 8000:80 --name web -v ~/Source/cleberg.net/.build:/usr/share/nginx/html -v ~/Source/cleberg.net/nginx-config.conf:/etc/nginx/conf.d/default.conf nginx

81

#+end_src

82

83

Here's an example of my development configuration file.

84

85

#+begin_src conf

86

# nginx-config.conf

87

server {

88

server_name cleberg.net www.cleberg.net;

89

90

root /usr/share/nginx/html;

91

index index.html;

92

autoindex on;

93

94

access_log /var/log/nginx/cleberg.net.access.log;

95

error_log /var/log/nginx/cleberg.net.error.log;

96

97

location / {

98

try_files $uri $uri/ =404;

99

}

100

101

listen [::]:80;

102

listen 80;

103

}

104

#+end_src

105

106

[[https://img.cleberg.net/blog/20240408-docker-local-web-server/custom-container.png]]

107

108

* Customizing Deployment Actions

109

110

I am currently blogging with [[https://emacs.love/weblorg/][weblorg]], which uses a custom =publish.el= file to

111

build the static site. Within this file, I have configured my deployment process

112

to check for the =ENV= variable in the shell and if it's set to =prod=, the

113

script will set the base URLs to =https://cleberg.net=. If not, it sets the base

114

URLs to =localhost:8000= (which matches the port used in the container above).

115

116

Therefore, I have modified my =build.sh= script to build with =localhost= URLs

117

if =ENV= is not set to =prod=. It also prevents the build process from sending

118

the built files to the production web server.

119

120

#+begin_src shell

121

#!/bin/bash

122

123

if [ "$ENV" == "prod" ]; then

124

    echo "Environment = Production"              && \

125

    rm -rf .build/*                              && \

126

    emacs --script publish.el                    && \

127

scp -r .build/* ubuntu:/var/www/cleberg.net/

128

else

129

    echo "Environment = Development"             && \

130

    rm -rf .build/*                              && \

131

emacs --script publish.el

132

fi

133

#+end_src

134

135

You can modify the container in numerous ways and this approach allows you to

136

create complex scenarios for your web development purposes. I highly recommend

137

switching over to a container-based approach for simple, local web development.

@@ -0,0 +1,137 @@
	1	#+title: Using Docker Desktop to Create a Development Web Server
	2	#+date: <2024-04-08 Mon 10:05:45>
	3	#+description: Learn how to launch local web servers with Docker Desktop.
	4	#+filetags: dev, nginx
	5	#+slug: docker-local-web-server
	6
	7	When developing websites locally, I often use a simple Python web server to
	8	observe the changes.
	9
	10	#+begin_src shell
	11	python3 -m http.server
	12	#+end_src
	13
	14	However, this approach has its limitations. For example, this approach does not
	15	enable logging or access controls. You also need to customize =SimpleHTTPServer=
	16	if you have advanced needs from your web server.
	17
	18	So, I went to find an alternative that is almost as easy and far more extensible
	19	and found Docker Desktop to be a suitable replacement.
	20
	21	* Docker Desktop
	22
	23	** Installation
	24
	25	[[https://www.docker.com/products/docker-desktop/][Docker Desktop]] is a desktop GUI for the phenomenal Docker container software.
	26	This allows you to manage containers, images, volumes, environments, and
	27	extensions via an easy-to-use GUI.
	28
	29	To install, open the link above and click the =Download= button for your
	30	platform. I'm going through this process on an M2 Macbook, so I downloaded the
	31	Mac - Apple Chip version.
	32
	33	Open the installer and follow the installation process until the application
	34	finishes the installation process.
	35
	36	#+caption: Docker Desktop on macOS
	37	[[https://img.cleberg.net/blog/20240408-docker-local-web-server/docker-desktop.png]]
	38
	39	** Creating an Nginx Container
	40
	41	I prefer to use the command line to create containers, so the following commands
	42	will be input via the terminal.
	43
	44	The following command will create a container, using the =nginx= image:
	45
	46	1. =-d=: Run this container as a daemon (detach)
	47	2. =-p=: Allocate a port in the format =<external>:<internal>=
	48	3. =-i=: Keep STDIN open even if not attached
	49	4. =-t=: Allocate a pseudo-TTY
	50	5. =-p=: Allocate a port in the format =<external>:<internal>=
	51	6. =--rm=: Remove the container once it's done running
	52
	53	#+begin_src shell
	54	docker run -it --rm -d -p 8000:80 --name web nginx
	55	#+end_src
	56
	57	You can navigate to [[http://localhost:8000]] to see the resulting page.
	58
	59	#+caption: Default Nginx Container
	60	[[https://img.cleberg.net/blog/20240408-docker-local-web-server/default-container.png]]
	61
	62	** Customizing the Nginx Container
	63
	64	Now that I have a container running the Nginx web server, I need to link some
	65	volumes so that I can modify the site configuration and provide the web files to
	66	serve.
	67
	68	Let's start with the new command, which adds two volumes:
	69
	70	1. =<your_content>:/usr/share/nginx/html=: This is the directory where you will
	71	provide the web pages for the server to serve.
	72	2. =<your_config>:/etc/nginx/conf.d/default.conf=: This is the Nginx
	73	configuration file for your site.
	74
	75	To see the updates, you can delete the previous container in the GUI or run
	76	=docker stop web= to stop the container. Once stopped, you can run the new
	77	=docker run= command below.
	78
	79	#+begin_src shell
	80	docker run -it -d -p 8000:80 --name web -v ~/Source/cleberg.net/.build:/usr/share/nginx/html -v ~/Source/cleberg.net/nginx-config.conf:/etc/nginx/conf.d/default.conf nginx
	81	#+end_src
	82
	83	Here's an example of my development configuration file.
	84
	85	#+begin_src conf
	86	# nginx-config.conf
	87	server {
	88	server_name cleberg.net www.cleberg.net;
	89
	90	root /usr/share/nginx/html;
	91	index index.html;
	92	autoindex on;
	93
	94	access_log /var/log/nginx/cleberg.net.access.log;
	95	error_log /var/log/nginx/cleberg.net.error.log;
	96
	97	location / {
	98	try_files $uri $uri/ =404;
	99	}
	100
	101	listen [::]:80;
	102	listen 80;
	103	}
	104	#+end_src
	105
	106	[[https://img.cleberg.net/blog/20240408-docker-local-web-server/custom-container.png]]
	107
	108	* Customizing Deployment Actions
	109
	110	I am currently blogging with [[https://emacs.love/weblorg/][weblorg]], which uses a custom =publish.el= file to
	111	build the static site. Within this file, I have configured my deployment process
	112	to check for the =ENV= variable in the shell and if it's set to =prod=, the
	113	script will set the base URLs to =https://cleberg.net=. If not, it sets the base
	114	URLs to =localhost:8000= (which matches the port used in the container above).
	115
	116	Therefore, I have modified my =build.sh= script to build with =localhost= URLs
	117	if =ENV= is not set to =prod=. It also prevents the build process from sending
	118	the built files to the production web server.
	119
	120	#+begin_src shell
	121	#!/bin/bash
	122
	123	if [ "$ENV" == "prod" ]; then
	124	echo "Environment = Production" && \
	125	rm -rf .build/* && \
	126	emacs --script publish.el && \
	127	scp -r .build/* ubuntu:/var/www/cleberg.net/
	128	else
	129	echo "Environment = Development" && \
	130	rm -rf .build/* && \
	131	emacs --script publish.el
	132	fi
	133	#+end_src
	134
	135	You can modify the container in numerous ways and this approach allows you to
	136	create complex scenarios for your web development purposes. I highly recommend
	137	switching over to a container-based approach for simple, local web development.

Commit d67c36e5d6

Commit `d67c36e5d6`