1
00:00:03,000 --> 00:00:06,823
The last option for running your Next.js application

2
00:00:06,823 --> 00:00:09,912
is to set up your own server with Node.js.

3
00:00:10,486 --> 00:00:13,382
And like in the previous video, I'll do that

4
00:00:13,382 --> 00:00:16,607
using a Ubuntu server I created in Digital Ocean.

5
00:00:17,173 --> 00:00:20,729
Let's start by connecting to this IP address

6
00:00:20,729 --> 00:00:21,538
using SSH.

7
00:00:22,118 --> 00:00:23,656
And I'll log in as root

8
00:00:23,656 --> 00:00:25,461
so we have full privileges.

9
00:00:26,785 --> 00:00:29,760
This machine only has the base Linux system.

10
00:00:30,260 --> 00:00:32,219
But to run a Next.js app

11
00:00:32,219 --> 00:00:34,423
we need to install Node.js.

12
00:00:35,005 --> 00:00:37,515
There are different ways to do that.

13
00:00:37,515 --> 00:00:40,026
We could install the Node.js version

14
00:00:40,026 --> 00:00:42,467
provided by the Linux distribution,

15
00:00:42,467 --> 00:00:43,861
in this case Ubuntu.

16
00:00:43,861 --> 00:00:46,791
But that's usually not the latest version.

17
00:00:47,570 --> 00:00:49,911
So I prefer to install the package

18
00:00:49,911 --> 00:00:51,496
provided by NodeSource,

19
00:00:52,064 --> 00:00:55,174
that is available from an additional apt repository.

20
00:00:55,674 --> 00:00:58,182
In practice we need to run this setup script,

21
00:00:58,907 --> 00:01:01,515
that we can first download using "curl".

22
00:01:02,015 --> 00:01:04,357
So this saved a shell script,

23
00:01:04,357 --> 00:01:06,698
called "nodesource_setup.sh",

24
00:01:07,278 --> 00:01:09,868
and we could inspect this file before running it

25
00:01:09,868 --> 00:01:11,487
to check exactly what it does.

26
00:01:12,040 --> 00:01:15,297
But it basically adds the NodeSource repository

27
00:01:15,297 --> 00:01:17,653
to the APT sources for our system.

28
00:01:18,222 --> 00:01:20,763
The next steps are to run that script,

29
00:01:20,763 --> 00:01:23,303
and then install the "nodejs" package.

30
00:01:23,870 --> 00:01:26,512
So let's run the setup script using "bash".

31
00:01:27,802 --> 00:01:30,398
This configures the NodeSource repository,

32
00:01:30,398 --> 00:01:32,623
and also does an "apt-cache update".

33
00:01:34,668 --> 00:01:37,745
At this point we can run "apt install nodejs"

34
00:01:38,245 --> 00:01:40,891
and we should get the Node.js version

35
00:01:40,891 --> 00:01:42,536
provided by NodeSource.

36
00:01:43,545 --> 00:01:46,749
We can check which version we have installed

37
00:01:46,749 --> 00:01:48,788
by running "node --version".

38
00:01:49,360 --> 00:01:52,503
And similarly we can also check the "npm" version.

39
00:01:53,003 --> 00:01:56,516
I'm going to update "npm" to the latest

40
00:01:56,516 --> 00:01:59,397
by running "npm install -g npm",

41
00:01:59,987 --> 00:02:03,229
where "-g" means it will be installed globally.

42
00:02:04,587 --> 00:02:08,097
Ok. So we should now have the latest npm

43
00:02:08,097 --> 00:02:09,413
that is "7.20".

44
00:02:10,000 --> 00:02:12,557
All right. At this point we have Node.js

45
00:02:12,557 --> 00:02:13,899
set up on our system.

46
00:02:14,462 --> 00:02:16,635
Now we want to run our Next.js app,

47
00:02:17,362 --> 00:02:20,202
which means that we basically need to upload

48
00:02:20,202 --> 00:02:21,944
this project to the server.

49
00:02:22,508 --> 00:02:24,744
Let's prepare a folder on the server

50
00:02:24,744 --> 00:02:26,358
where we can upload it to.

51
00:02:26,920 --> 00:02:30,296
Let's make a directory called "/opt/next-blog".

52
00:02:31,953 --> 00:02:34,239
Now we need to upload all the files,

53
00:02:34,239 --> 00:02:36,970
so let me go and copy the IP address again.

54
00:02:38,253 --> 00:02:40,363
And then I'm going to use Cyberduck

55
00:02:40,363 --> 00:02:41,569
to upload the files.

56
00:02:43,386 --> 00:02:44,941
We want to use SFTP,

57
00:02:46,186 --> 00:02:48,509
connect to that server, as "root".

58
00:02:49,786 --> 00:02:51,508
Trust the server fingerprint.

59
00:02:54,052 --> 00:02:56,793
And, if we start from the top of the file system

60
00:02:58,718 --> 00:03:01,676
we want to go into "opt" and then "next-blog".

61
00:03:02,176 --> 00:03:04,225
So here's where we want to upload

62
00:03:04,225 --> 00:03:05,591
all our project files.

63
00:03:06,153 --> 00:03:08,828
Let me open this project folder in Finder

64
00:03:10,719 --> 00:03:13,210
so I can drag it into Cyberduck from here.

65
00:03:13,710 --> 00:03:15,210
In fact we want to copy

66
00:03:15,210 --> 00:03:16,904
what's inside "next-blog",

67
00:03:17,576 --> 00:03:19,348
so let's select all the files.

68
00:03:19,848 --> 00:03:22,676
But I'm going to exclude the "dist" folder,

69
00:03:22,676 --> 00:03:24,780
that contains the static export.

70
00:03:25,346 --> 00:03:27,011
And also "node_modules",

71
00:03:27,011 --> 00:03:29,023
because we'll need to install

72
00:03:29,023 --> 00:03:31,591
the npm packages on the Linux system.

73
00:03:32,230 --> 00:03:34,985
So I'm going to upload all these other

74
00:03:34,985 --> 00:03:36,870
files and folder via SFTP.

75
00:03:38,430 --> 00:03:40,724
And we now have all the project files

76
00:03:40,724 --> 00:03:42,212
available on the server.

77
00:03:42,774 --> 00:03:45,508
To be clear, I'm doing these steps manually

78
00:03:45,508 --> 00:03:47,607
just to show you what's involved,

79
00:03:47,607 --> 00:03:49,832
but you could automate the process,

80
00:03:49,832 --> 00:03:52,376
for example by fetching the project code

81
00:03:52,376 --> 00:03:54,284
from a Git repository instead.

82
00:03:55,038 --> 00:03:57,366
Anyway, if we go back to our Terminal

83
00:03:57,366 --> 00:03:58,687
with the SSH session,

84
00:03:59,250 --> 00:04:01,156
We can now go into the project folder,

85
00:04:01,915 --> 00:04:03,921
and we should see all the files here.

86
00:04:04,421 --> 00:04:07,564
Now we need to install all the "npm" packages,

87
00:04:08,064 --> 00:04:10,142
we need to do this here on Linux,

88
00:04:10,142 --> 00:04:12,157
because if you copy the packages

89
00:04:12,157 --> 00:04:14,424
from a different system, like macOS,

90
00:04:15,050 --> 00:04:16,656
they may not work on Linux.

91
00:04:17,250 --> 00:04:19,276
Anyway, at this point we should see

92
00:04:19,276 --> 00:04:22,172
a "node_modules" folder with all the dependencies.

93
00:04:22,730 --> 00:04:25,460
So we can now build our Next.js app,

94
00:04:25,460 --> 00:04:28,569
using "npm run build" like we do locally.

95
00:04:29,145 --> 00:04:32,332
This should have generated all the static pages,

96
00:04:32,332 --> 00:04:33,992
under the ".next" folder.

97
00:04:34,559 --> 00:04:37,048
And at this point we can finally start

98
00:04:37,048 --> 00:04:39,340
our Next.js app in production mode.

99
00:04:39,906 --> 00:04:42,312
It's running, but on port 3000.

100
00:04:42,812 --> 00:04:44,853
So if we go back to our web browser

101
00:04:45,353 --> 00:04:47,309
we can try opening this IP address,

102
00:04:47,809 --> 00:04:51,051
but we need to add port 3000 to the URL.

103
00:04:51,551 --> 00:04:53,128
And here's our Blog website,

104
00:04:53,128 --> 00:04:54,874
that seems to be fully working.

105
00:04:55,431 --> 00:04:58,203
So that's good, but it's a bit annoying

106
00:04:58,203 --> 00:05:00,406
that it's running on port 3000.

107
00:05:00,978 --> 00:05:03,018
We can easily change the port

108
00:05:03,018 --> 00:05:04,918
used by the Next.js server.

109
00:05:05,489 --> 00:05:08,799
We can run the "next" tool directly with "npx"

110
00:05:09,299 --> 00:05:12,192
and if we look at the help for the "start" command

111
00:05:12,692 --> 00:05:15,433
you can see that it accepts a "port" option.

112
00:05:15,933 --> 00:05:19,510
So let's start the server with "npx next start",

113
00:05:20,010 --> 00:05:22,818
but passing "--port 80".

114
00:05:23,710 --> 00:05:26,020
And it's now running on port 80

115
00:05:26,020 --> 00:05:28,181
that's the default HTTP port.

116
00:05:28,756 --> 00:05:30,615
So in the browser we can now

117
00:05:30,615 --> 00:05:33,536
simply load the server address without port.

118
00:05:34,103 --> 00:05:35,038
And this works fine.

119
00:05:36,735 --> 00:05:39,592
So there you go. We have our Next.js app

120
00:05:39,592 --> 00:05:42,377
running in our own server with Node.js.

121
00:05:42,377 --> 00:05:45,305
It's similar to how we've been testing it

122
00:05:45,305 --> 00:05:47,233
in production mode locally,

123
00:05:47,233 --> 00:05:50,161
except that you need to set everything up

124
00:05:50,161 --> 00:05:51,517
on a remote server.