前言
开始建站了,暂时还没想要做些什么东西。
Anyway,先搞个云服务器吧,那要怎么搭建呢?先来个最简单的。
以阿里云服务器为例,假设公网 IP 为
100.2.3.4
(随便乱写的)。
正文
1. 登录云服务
$ ssh root@100.2.3.4
2. 安装 Nginx 及相关命令
# 安装 $ yum install nginx -y # 启动 $ nginx # 关闭 $ nginx -s stop # 重启 $ nginx -s reload
3. Nginx 默认配置
Nginx 配置文件目录一般在 /etc/nginx/
下,打开 nginx.conf
文件可以看到配置:
user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid; # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. include /usr/share/nginx/modules/*.conf; events { worker_connections 1024; } http { log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; include /etc/nginx/mime.types; default_type application/octet-stream; include /etc/nginx/conf.d/*.conf; server { listen 80 default_server; listen [::]:80 default_server; server_name _; root /usr/share/nginx/html; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } } }
当外网用户访问服务器 Web 服务由 Nginx 提供,Nginx 需要配置静态资源的路径信息才能通过 URL 正确访问到服务器上的静态资源。
当我们在服务器上安装并启动 Nginx 之后,就可以通过 http://<域名或IP>
访问我们的网页了。所以,在浏览器中输入 http://100.2.3.4
即可。
我们观察到浏览器的地址变成了 http://100.2.3.4/index.html
,这页面是安装 Nginx 的默认站点,可以在 /usr/share/nginx/html
目录下找到。在 nginx.conf
配置文件中,有一项 root /usr/share/nginx/html
的配置,意思是当外网访问服务器跟目录时,Nginx 会将资源指向 /usr/share/nginx/html
的站点。
但如果输入地址,无法打开(如下截图)。
以阿里云为例,需要在云服务器添加“安全组规则”,添加并保存,重新刷新页面就能打开了。
关于阿里云服务器安全组规则说明,推荐这篇文章。
4. 修改 Nginx 配置
我习惯将前端静态资源放置到服务器的 /data/www
下,因此将配置修改为 root /data/www
。此时访问 http://100.2.3.4
会指向 /data/www/index.html
(在不配置 location
的 index
情况下,Nginx 默认配置是 index.html
)。
server { listen 80; server_name _; root /data/www; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } }
修改配置后,记得执行
ngnix -s reload
重启 Nginx 服务。
5. 将 Webpack 打包的文件上传服务器
由于我使用的是 Mac 机器,因此可以直接在系统终端使用 scp
命令将本地文件上传到云服务器。
# scp [参数] [原路径] [目标路径] $ scp -r /Users/frankie/Desktop/Web/react-demo/dist/* root@100.2.3.4:/data/www
scp
(secure copy)用于在 Linux 下进行远程拷贝文件的命令。类似于 cp
,只不过 cp
只能在本机进行拷贝,不能跨服务器。-r
表示递归复制整个目录。
关于 scp 更多细节,请看文章。
需要注意一下,下面两种的区别:
# 1️⃣ $ scp -r /xxx/dist /data/www # 2️⃣ $ scp -r /xxx/dist/* /data/www
其中 1️⃣ 得到的是 /data/www/dist
,而 2️⃣ 得到的是 /data/www
。前者表示将 dist
整个目录拷贝至 /data/www
下。后者是把 dist
目录下的所有子文件和子目录都拷贝至 /data/www
。
换句话说就是,前者配置 root
的路径应该是 /data/www/dist
,后者则为 /data/www
。
效果如下:
frankie@iMac ~ % 🐶 scp -r /Users/frankie/Desktop/Web/react-demo/dist/* root@100.2.3.4:/data/www/ root@100.2.3.4's password: bundle.2b1a17.js 100% 1580 120.1KB/s 00:00 favicon.ico 100% 9662 724.9KB/s 00:00 index.html 100% 2045 149.9KB/s 00:00 vendors.chunk.7fb171.js 100% 625KB 409.8KB/s 00:01
[root@ali-ecs www]# ls bundle.2b1a17.js favicon.ico index.html vendors.chunk.7fb171.js
6. 看效果
在浏览器中访问 http://100.2.3.4
即可看到我们配置的网页了。
最简单的 Nginx 部署静态网页就完了,其他的下次再讲...
The end.