1
00:00:03,000 --> 00:00:05,714
We've seen how to deploy our website

2
00:00:05,714 --> 00:00:07,826
to a fully managed platform,

3
00:00:07,826 --> 00:00:09,786
such as Vercel or Netlify.

4
00:00:09,786 --> 00:00:12,652
Now I want to show you a quick example

5
00:00:12,652 --> 00:00:16,271
of how we can also deploy it to our own servers.

6
00:00:16,271 --> 00:00:20,268
In this case I'm going to set up the Nginx web server

7
00:00:21,146 --> 00:00:24,287
on a Ubuntu machine running in Digital Ocean.

8
00:00:24,287 --> 00:00:26,590
Now, this requires some knowledge

9
00:00:26,590 --> 00:00:28,754
of Linux system administration,

10
00:00:28,754 --> 00:00:31,965
so if it's not something you're familiar with,

11
00:00:31,965 --> 00:00:33,990
feel free to skip this video,

12
00:00:33,990 --> 00:00:36,921
or maybe watch it but just to get an idea.

13
00:00:37,771 --> 00:00:40,006
Anyway, here I'm logged into

14
00:00:40,006 --> 00:00:42,162
my Digital Ocean dashboard,

15
00:00:42,162 --> 00:00:45,036
and I have already created a server,

16
00:00:45,036 --> 00:00:48,150
or "droplet" as Digital Ocean calls it,

17
00:00:48,150 --> 00:00:50,385
based on Ubuntu Linux 20.04.

18
00:00:51,204 --> 00:00:53,611
This is the IP address for that server,

19
00:00:54,111 --> 00:00:55,851
and I'm going to copy it

20
00:00:55,851 --> 00:00:59,186
so that I can connect to the server using SSH.

21
00:01:00,311 --> 00:01:02,417
And I can connect as the "root" user.

22
00:01:02,917 --> 00:01:03,888
I'm now logged in,

23
00:01:04,483 --> 00:01:06,887
and this machine so far only has

24
00:01:06,887 --> 00:01:08,614
the base Ubuntu system,

25
00:01:08,614 --> 00:01:10,717
as created by Digital Ocean.

26
00:01:11,367 --> 00:01:12,864
What I'm going to do now

27
00:01:12,864 --> 00:01:14,983
is install the "nginx" web server,

28
00:01:15,545 --> 00:01:18,910
using "apt", that is the system package manager.

29
00:01:18,910 --> 00:01:21,993
Now, "nginx" depends on some other packages,

30
00:01:22,563 --> 00:01:23,819
so we need to confirm

31
00:01:23,819 --> 00:01:25,913
that we want to install everything.

32
00:01:27,396 --> 00:01:29,161
Ok, this should have installed

33
00:01:29,161 --> 00:01:30,514
the "nginx" web server.

34
00:01:31,072 --> 00:01:32,674
So we should be able to open

35
00:01:32,674 --> 00:01:34,676
this IP address in the web browser,

36
00:01:36,072 --> 00:01:39,816
and we can see the default page served by "nginx".

37
00:01:40,316 --> 00:01:43,755
This shows that the web server is running correctly.

38
00:01:43,755 --> 00:01:46,533
But of course we want to replace this page

39
00:01:46,533 --> 00:01:47,921
with our own website.

40
00:01:48,553 --> 00:01:51,383
To do that we need to upload our website

41
00:01:51,383 --> 00:01:52,728
to this IP address.

42
00:01:53,298 --> 00:01:56,099
For the upload I'm going to use an FTP client

43
00:01:56,099 --> 00:01:57,281
called "Cyberduck".

44
00:01:57,843 --> 00:02:00,593
Cyberduck is only available for macOS,

45
00:02:00,593 --> 00:02:03,488
but you can use any FTP client you like.

46
00:02:04,060 --> 00:02:06,233
Anyway, I'm going to open a new connection

47
00:02:07,193 --> 00:02:09,869
setting "SFTP" as the protocol.

48
00:02:10,369 --> 00:02:13,445
Then I need to paste the IP address for the "Server",

49
00:02:13,945 --> 00:02:16,347
and enter "root" as the "Username".

50
00:02:16,347 --> 00:02:18,474
I don't need a password because

51
00:02:18,474 --> 00:02:21,219
I'm using an SSH key for authentication,

52
00:02:21,219 --> 00:02:24,033
and it's the same I already used for SSH.

53
00:02:24,738 --> 00:02:25,808
So let's "Connect".

54
00:02:27,371 --> 00:02:29,778
We need to accept the server fingerprint.

55
00:02:31,571 --> 00:02:34,881
And we can now browse the server file system.

56
00:02:35,381 --> 00:02:39,794
Now, Nginx keeps its websites under "/var/www",

57
00:02:40,294 --> 00:02:44,205
and the "html" folder contains the default website.

58
00:02:44,705 --> 00:02:48,312
Here there's this "index.nginx-debian.html" file

59
00:02:48,312 --> 00:02:51,617
that must be the page we saw in the browser.

60
00:02:52,192 --> 00:02:53,563
Let's try deleting it,

61
00:02:55,692 --> 00:02:57,653
and if we go back to that page,

62
00:02:57,653 --> 00:02:58,538
and reload it.

63
00:02:59,392 --> 00:03:01,515
You can see that it's no longer available.

64
00:03:02,015 --> 00:03:03,888
Now we want to upload our website,

65
00:03:04,548 --> 00:03:06,281
so let's open the "dist" folder

66
00:03:06,281 --> 00:03:08,406
that we created in the previous video,

67
00:03:08,961 --> 00:03:11,419
by using the "next export" command.

68
00:03:12,161 --> 00:03:14,040
We want to take all the files

69
00:03:14,040 --> 00:03:16,242
that are inside the "dist" folder,

70
00:03:17,094 --> 00:03:20,938
and drag them onto the "html" folder on the server.

71
00:03:21,438 --> 00:03:24,218
Let me "Always" accept the server fingerprint,

72
00:03:24,218 --> 00:03:26,575
otherwise it'll keep asking every time.

73
00:03:27,135 --> 00:03:29,842
But this has now uploaded all the files

74
00:03:29,842 --> 00:03:32,548
for our static website onto the server.

75
00:03:33,117 --> 00:03:35,757
So at this point, if we go back to the browser

76
00:03:35,757 --> 00:03:36,904
and reload the page,

77
00:03:37,461 --> 00:03:40,771
we can see our Blog running on our own Nginx server.

78
00:03:41,994 --> 00:03:44,518
And it all seems to be working perfectly fine.

79
00:03:45,018 --> 00:03:48,946
Note that as it is the website is using plain HTTP,

80
00:03:48,946 --> 00:03:52,258
in fact Chrome shows a "Not Secure" warning

81
00:03:52,258 --> 00:03:53,721
in the address bar.

82
00:03:54,375 --> 00:03:56,646
Setting up HTTPs would require

83
00:03:56,646 --> 00:03:58,311
some additional steps,

84
00:03:58,886 --> 00:04:01,410
but this should give you an idea of

85
00:04:01,410 --> 00:04:04,798
what's involved in running your own web server.

86
00:04:04,798 --> 00:04:07,538
I used Digital Ocean for this example,

87
00:04:07,538 --> 00:04:11,359
but you could use any other cloud provider of course,

88
00:04:11,359 --> 00:04:13,666
like Amazon EC2 or Google Cloud.

89
00:04:13,666 --> 00:04:16,550
The one thing I like about Digital Ocean

90
00:04:16,550 --> 00:04:18,928
is that they have good tutorials,

91
00:04:18,928 --> 00:04:21,957
and in fact you'll find a link to the page

92
00:04:21,957 --> 00:04:25,129
on how to up Nginx in the lecture resources.