从0构建一个web网站(1)

工具链

操作系统: Ubuntu 20.10
前端: React
服务器: nginx

1. 下载安装 nginx

sudo apt install nginx
:<<!
这里是shell的多行注释
xiaoyao@Develop:~/temp$ sudo apt install nginx
Reading package lists... Done
Building dependency tree       
Reading state information... Done
The following packages were automatically installed and are no longer required:
  ipset libipset13 libnftables1 python3-decorator python3-firewall python3-nftables python3-selinux python3-slip python3-slip-dbus
Use 'sudo apt autoremove' to remove them.
The following NEW packages will be installed:
  nginx
0 upgraded, 1 newly installed, 0 to remove and 1 not upgraded.
Need to get 3,980 B of archives.
After this operation, 48.1 kB of additional disk space will be used.
Get:1 http://mirrors.aliyun.com/ubuntu groovy/main amd64 nginx amd64 1.18.0-6ubuntu2 [3,980 B]
Fetched 3,980 B in 1s (4,442 B/s) 
Selecting previously unselected package nginx.
(Reading database ... 176760 files and directories currently installed.)
Preparing to unpack .../nginx_1.18.0-6ubuntu2_amd64.deb ...
Unpacking nginx (1.18.0-6ubuntu2) ...
Setting up nginx (1.18.0-6ubuntu2) ...
！

1.1 查看nginx默认网页

打开ubuntu上的浏览器，并输入 http://localhost 即可看到nginx的默认网页，说明已经安装成功。
注意，此时还不能在其它机器上访问，想做到这一步请查看后续步骤。

2. 配置外部访问

注意，想要外网访问需要公网ip或者其他软件的端口映射，本文中暂且只讲述如何做到局域网可访问。

此时在局域网内的其它电脑上查看该网页时查看不到的

通过配置iptables开放80端口即可

sudo iptables -A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT

3. 持久化iptables配置

经过2中的配置之后，可以在外部访问网页了，但是当服务器重启后，iptables恢复成了原来的规则，因此需要配置iptables规则持久化。

sudo apt-get install iptables-persistent
su root
# 下面这两条命令需要在root用户下执行，sudo会报错: Permission denied
# 保存ipv4规则
iptables-save > /etc/iptables/rules.v4
# 保存ipv6规则
ip6tables-save > /etc/iptables/rules.v6

4. 替换主页

本文中使用的是 react 的 demo，构建后用来替换主页的。
如何搭建环境并构建 react demo 请自行查阅资料，本文中如果想详尽介绍会占用很大篇幅。
在前端项目下执行 npm build 即可将文件打包到 build 目录下。
将构建好的build目录下的所有文件拷贝到ubuntu的 /var/www/html/ 目录下。
此时再打开网页看到的就是 react demo 的主页了。