【前言】作为一名前端工程师，我们的职责就是写页面还有解决提出需求的人🥹，最近自己在写项目，突然很想自己去尝试搭建服务器，还不如让我去解决提出需求的人😑，毕竟可比搭服务器简单多了，对吧！本文从简单的购买服务器逐渐进阶过渡到部署一个完整的项目，整篇文章我估计会是万字系列，我会尽可能讲的有趣一些，如有问题也可以一起交流学习，本人React工作经验很少，只有简单服务器搭建基础，目前也在不断学习中，若下面的内容有错误，请各位大佬指正，理性讨论，谢谢☃️

【备注】本文的实现均用 React 实现，服务器系统装的是 centos 7.6，各位小伙伴可以采用其他的实现，vue或者纯html都可以，只是方便使用就好，根据自己所需要的业务场景进行更换即可。由于内容有点多，因此将本文拆分成多个文章，如果下面没有文章二的链接，就是笔者还没更新啦，请关注笔者，你的点赞转发关注将会是我更新文章的动力。

【导读】

1. 购买服务器
2. Linux操作指令
3. 简单设置服务器
4. Docker
5. Nginx

购买服务器

如何挑选服务器

本文的服务器是在腾讯云买的轻量级服务器，其实都大差不差，无论是阿里云、腾讯云、还是其他什么云都好，买自己业务需要的服务器即可，肯定是cpu核数越大越好，带宽越大越好，内存越大越好，别管，有钱的话就是任性！系统就选择centos7（具体是7.几我也忘记啦，有记得的小伙伴可以评论区补充一下，反正是7嘿嘿），地域选择离自己最近的即可。

Linux操作指令

centos7 其实就是 Linux，所以需要掌握一些常用指令才能操作服务器，下面简单科普一下Linux最基本的一些指令

// 列出当前目录下的文件及文件夹
ls

//使用 pwd 命令找出您所在的当前工作目录（文件夹）的路径
pwd

// 获取文件内容
cat xxx

// 切换目录
cd
// 切换到上级目录
cd ..
// 切换到指定目录
cd /etc/localtime

// 创建文件夹
mkdir 文件夹名

// 删除空文件夹
rmdir 文件夹名

// 创建文件
touch 文件.扩展名

// 使用管理员权限
sudo + 其他命令

// 修改读写权限
chmod 

笔者太懒了，更多用法自己百度、ChatGpt都可以，查一查，学一学。太多了，列不完。

简单设置服务器

选好服务器付款完后，等待分配ip，分配完ip然后就会进到控制台，有的小伙伴就开始慌了，要搞什么，这点点那点点，不知道干啥好，听我的就去看看你自己的ip是多少，不听我的你现在出门左转出去，还是👂一下吧哈哈哈哈。紧接着就可以去设置一下服务器的ssh登录，

为什么要设置 ssh 登录

1、安全！我觉得最重要的还是安全，我在上学的时候，就有试过root登录（给小伙伴科普一下，就是最高权限管理员登录，设置个很简单的密码，然后就自己登录在那玩）结果就翻车了，服务器天天被拉去挖矿，经常被黑，腾讯服务器固定那个点给我发消息，我都能预判它的安全消息到来。如果你不怕你自己翻车，觉得自己服务器很顶，或者有什么运维会进行维护的，你可以跳过我这一步。

2、方便！不用每次都输入密码，直接通过登录校验。

设置 ssh 登录

1、以腾讯云服务器为例，其他云服务器也是类似，找到密钥，点击创建密钥，如下图

2、地域选择离自己最近的即可，创建方式有两种，第一种是生成一个pem文件，不再详细讲述啦，有需要就评论区询问或者自己查询一下资料，个人比较习惯使用已有公钥（其实跟git的ssh是一模一样的步骤）

3、如果你本地有多个ssh key，需要配置一个config文件（就叫config，没有文件扩展名，里面是一个个的地址及文件指向），以我这里的文件举例（ps: windows和mac的稍有不同，我的笔记本电脑是mac，如果有windows的小伙伴可以搜一搜攻略，比较简单，如果不会的话就在评论区询问吧），下面举例了3个ssh key的情况，然后把你绑定的key写上去！把服务器ip写上去。

Host 你的服务器ip地址
HostName 你的服务器ip地址
User root
IdentityFile ~/.ssh/你的ssh key文件名（不带文件扩展名）

Host 你的服务器ip地址
HostName 你的服务器ip地址
User root
IdentityFile ~/.ssh/你的ssh key文件名（不带文件扩展名）

Host 你的服务器ip地址
HostName 你的服务器ip地址
User root
IdentityFile ~/.ssh/你的ssh key文件名（不带文件扩展名）

Match all
Include ~/.fig/ssh

4、用下面的命令测试一下

// pem 文件可以用这种方式（第一种创建密钥的方式）
ssh -p 22 root@xx.xx.xx.xx（你的服务器ip） -i ~/.ssh/你的ssh key文件名.pem(如果路径有问题你就改成你自己的路径)

// pub 文件配置好之后可以直接（第二种已有密钥的方式）
ssh root@xx.xx.xx.xx（你的服务器ip）

✅ 成功案例

Last login: Tue May 30 22:54:04 2023 from xx.xx.xx.xx

[root@VM-12-2-centos ~]#

恭喜恭喜，你已经通过ssh登录了服务器啦。这时候你就可以随便玩一下上面Linux的指令了，千万别看抖音说很帅气的执行一段代码，一直在跑，很有可能是循环删除你磁盘的所有文件，别乱搞哈，看到类似rm的命令谨慎执行。

❌ 错误案例

root@xx.xx.xx.xx: Permission denied (publickey,gssapi-keyex,gssapi-with-mic).没认真听课，拉出去，请你再从上面由头到尾检查一下，还是有问题的话评论区见。

docker

不知从何时起，这个名词经常在我耳边响起，却又不知道它到底长啥样，就像一个同事的名字一直环绕在耳边，却一直没见过人似的，今天就见见这小子。

docker 是什么

docker是一个开源的软件部署解决方案、也是轻量级的应用容器框架；可以打包、发布、运行任何的应用。以我自己的理解来说，docker就是迷你虚拟机，如果有接触过虚拟机的小伙伴肯定会知道，虚拟机真是太TM大了，动辄几个G的内存，让我这本不富裕的家庭雪上加霜。你可以把它想成虚拟机，有三个核心概念，镜像、容器、宿主机（你自己的机器）。

一个镜像可以生成多个容器，每个容器都是独立的，相互之间是没有接口可以调用的。

一个容器也可以制作成一个镜像，再用镜像生成多个相同的容器。

为什么要用 docker （Docker 的优点）

本节引用菜鸟教程资料，原文地址，我就懒得去写啦，大概看看，有个印象就好，单看理论是很难记住的，只有实践才能出真知。

Docker 是一个用于开发，交付和运行应用程序的开放平台。Docker 使您能够将应用程序与基础架构分开，从而可以快速交付软件。借助 Docker，您可以与管理应用程序相同的方式来管理基础架构。通过利用 Docker 的方法来快速交付，测试和部署代码，您可以大大减少编写代码和在生产环境中运行代码之间的延迟。

1、快速，一致地交付您的应用程序

Docker 允许开发人员使用您提供的应用程序或服务的本地容器在标准化环境中工作，从而简化了开发的生命周期。

容器非常适合持续集成和持续交付（CI / CD）工作流程，请考虑以下示例方案：

• 您的开发人员在本地编写代码，并使用 Docker 容器与同事共享他们的工作。
• 他们使用 Docker 将其应用程序推送到测试环境中，并执行自动或手动测试。
• 当开发人员发现错误时，他们可以在开发环境中对其进行修复，然后将其重新部署到测试环境中，以进行测试和验证。
• 测试完成后，将修补程序推送给生产环境，就像将更新的镜像推送到生产环境一样简单。

2、响应式部署和扩展

Docker 是基于容器的平台，允许高度可移植的工作负载。Docker 容器可以在开发人员的本机上，数据中心的物理或虚拟机上，云服务上或混合环境中运行。

Docker 的可移植性和轻量级的特性，还可以使您轻松地完成动态管理的工作负担，并根据业务需求指示，实时扩展或拆除应用程序和服务。

3、在同一硬件上运行更多工作负载

Docker 轻巧快速。它为基于虚拟机管理程序的虚拟机提供了可行、经济、高效的替代方案，因此您可以利用更多的计算能力来实现业务目标。Docker 非常适合于高密度环境以及中小型部署，而您可以用更少的资源做更多的事情。

docker 常用指令

下文所用到的docker指令基本都包含在里面，如有不懂，可以翻回来看看，以自己理解写的，可能会有问题，如果有问题欢迎评论指出。

// 搜索镜像的版本
docker search [镜像名称]

// 查看所有容器运行情况
docker ps -a

// 查看容器日志
// -f 查看最新时间的日志
docker logs [容器名称 or 容器id]

// 拉取xxx镜像（根据实际情况替换），如果不填版本默认为最新
docker pull [镜像名称]:[版本]

Eg: docker pull nginx

// 用镜像以容器方式运行 
// -d 让容器后台运行，并且打印containerId
// -p 指定容器暴露的端口，映射端口:镜像端口
// -v 指的是挂载目录，映射位置（挂载位置）:源文件位置
docker run
-d 
-p 80:80 
--name [填入自定义容器名称] 
-v [容器内的文件挂载到服务器上的文件夹]:[容器内的目标位置]
[镜像名称]

Eg: 
 docker run \
 -d \
 -p 80:80 \
 --name inginx \
 -v /home/nginx/nginx.conf:/etc/nginx/nginx.conf \
 -v /home/nginx/conf.d:/etc/nginx/conf.d \
 -v /home/nginx/logs:/var/log/nginx \
 -v /home/nginx/html:/usr/share/nginx/html \
 nginx

// 查看docker所有已经获取的镜像
docker images

// 删除镜像（镜像id可以只取前三个）
docker rmi [镜像id]

// 启动容器
docker start [容器名称 or 容器id]

// 停止正在运行的容器
docker stop [容器名称 or 容器id]

// 删除容器
docker rm [容器名称 or 容器id]

// 直接删除正在运行的容器
docker rm - f [容器名称 or 容器id]

// 复制容器配置信息
docker cp [容器名称 or 容器id]:[容器配置文件路径] [目标文件夹路径]

Eg: docker cp inginx:/usr/share/nginx/html /home/nginx/

// 进入容器，-it 应该指的是与容器进行交互，bash指的是以终端形式交互。
docker exec -it [容器名称 or 容器id] bash

安装过程

先更新所有软件包、更换镜像源

腾讯云服务器 centos7自带yum，docker需要用yum安装，下文所有安装过程中遇到对话y/n的话均选y，如有特别提醒，则按特别提醒来。

// 更新所有软件包
sudo yum update
// 设置镜像源为阿里源，类似于 npm 更换源
sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

安装 docker和docker-compose

// 安装 docker（注意是docker-ce不要改成docker） docker-compose(后面会有介绍)
yum install docker-ce docker-compose

安装完成后，测试一下docker是否正常

// 查看 docker 版本
docker -v

不出意外的话，你会看到类似下面的提醒

Docker version 1.13.1, build 7d71120/1.13.1

再来测试一下docker-compose是否正常

// 查看 docker-compose 版本
docker-compose -v 

不出意外的话，你会看到类似下面的提醒

docker-compose version 1.18.0, build 8dd22a9

设置服务器开机自启动然后启动docker

// 设置开机自启动
systemctl enable docker
// 启动
systemctl start docker

更新一下docker镜像源，执行一下命令

vim /etc/docker/daemon.json

按i插入，复制粘贴以下内容进去

{
    "registry-mirrors": [
        "https://mirror.ccs.tencentyun.com"
    ]
}

这里用的是腾讯云镜像，有其他镜像的需求，可以自行替换

按下esc，输入:wq保存退出

更改好配置后重启docker，执行

sudo systemctl restart docker

紧接着来输出一段程序员必备语句hello world

拉取hello-world镜像

docker pull hello-world

运行hello-world

docker run hello-world

然后你会得到以下内容

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/

恭喜你已经完成docker安装

至此docker和docker-compose已经安装完成，下文先采用docker的方式安装，docker-compose也是一种安装方式，这两种方式类似于npm和cnpm的关系，但是却略有不同。

Nginx

Nginx 是什么

Nginx 是一个高性能的 HTTP 和反向代理服务器，特点是占用内存少，并发能力强，事实上 Nginx 的并发能力确实在同类型的网页服务器中表现较好。

Nginx 专为性能优化而开发，性能是其最重要的要求，十分注重效率，有报告 Nginx 能支持高达 50000 个并发连接数。

为什么要用Nginx

1、作为Web服务器有优势

2、作为负载均衡服务器有优势

3、作为代理服务器有优势

4、稳定、节省带宽、性能高

关于安装位置

Nginx可以直接安装在服务器上，也可以安装在docker上，各有优缺点，比较推荐安装在docker上，下文就是安装在docker上。

安装过程

先获取Nginx镜像

默认获取最新版本的镜像，如果有问题再降低镜像版本即可

docker pull nginx

创建Nginx挂载文件夹

这一步是为了将Nginx容器内的配置文件挂载到服务器上，因此需要创建存放的目录文件夹，可以自定义目录文件夹，不一定要按照我的来，如果有修改的话，按照自己修改后的目录文件夹来。

// 存放配置文件
mkdir -p /home/nginx

// 用于存放nginx日志
mkdir -p /home/nginx/logs

// 这个最关键，用于存放静态资源，也就是vue或者react打包出来后的产物（dist文件夹）
mkdir -p /home/nginx/html

不挂载的生成一个Nginx容器！！！！这一步很重要！！！

如果有docker基础的小伙伴可能会知道，有一些容器可以直接挂载到宿主机上，但是nginx不可以，docker安装Nginx的时候，需要先读取配置才运行，如果宿主机对应的目录是空的话，就启动不了了，所以需要先安装不挂载的容器（来自好朋友的解释）然后再将容器内的配置文件复制出来，再进行挂载，听不懂的小伙伴也没关系，照着步骤往下走就对了！别跳过！

执行以下命令，生成一个Nginx容器，我这里命名为inginx，如果你们喜欢其他名字自己命名即可，下面对应着自己的命名进行操作。

docker run -d --name inginx -p 80:80 nginx

进入nginx容器，查看Nginx的配置，这步可做可不做，你随意～

// 进入容器
docker exec -it inginx bash
// 查看nginx配置文件
cat /etc/nginx/nginx.conf
// 退出nginx
exit

不出意外的话你会得到下面的内容

复制配置文件到宿主机（服务器）上

执行下面三条命令

docker cp inginx:/etc/nginx/nginx.conf /home/nginx/nginx.conf
docker cp inginx:/etc/nginx/conf.d /home/nginx/
docker cp inginx:/usr/share/nginx/html /home/nginx/

不出意外你应该会得到下面的提示

删除刚刚空挂载的容器

把配置文件复制出来后，原来的那个Nginx容器已经没用了，做个渣男（无不良取向，富强明主文明和谐），删了它，找新欢去了。

这时候你有两种方式删除这个Nginx容器

第一种：先暂停运行容器，再删除容器

docker stop inginx
docker rm inginx

第二种：直接删除正在运行的容器

docker rm - f inginx

重新创建一个Nginx容器

执行命令

docker run \
    -p 80:80 \
    --name inginx \
    --restart=always \
    -v /usr/share/zoneinfo/Asia/Shanghai:/etc/localtime \
    -v /home/nginx/nginx.conf:/etc/nginx/nginx.conf \
    -v /home/nginx/conf.d:/etc/nginx/conf.d \
    -v /home/nginx/logs:/var/log/nginx \
    -v /home/nginx/html:/usr/share/nginx/html \
    -d nginx

--restart=always设置自启动，Nginx一般都不能停的，你的web服务总不可能会中断一会吧。

注意不要调整参数位置，否则你可能会遇到问题，如果遇到问题可以在我最底下的错误日志找找有没有对应的问题。

执行完上面命令后，如果你得到一串乱七八糟的字符串，那么恭喜你创建成功。如果没有，你就上去重复一下上面的步骤，一步步来，如果还有问题你来打我！！，开玩笑，有问题就直接评论区问问看，可能可以解答。

Nginx 主要配置文件讲解

如果上面有跟着操作的小伙伴，可能会看到我去查看了一个配置文件，那个配置文件是Nginx的主要配置文件，然后我们后面如果有需要做其他操作时会修改那个文件，再介绍一个默认配置文件，包括路径（这里指的是容器内的路径）。

/etc/nginx/nginx.conf是Nginx的主配置文件。

/etc/nginx/conf.d下的default.conf 是Nginx默认配置文件。

修改默认配置文件

执行以下命令，进入Nginx容器。

docker exec -it inginx bash

紧接着执行下面命令，查看默认配置文件。

cat /home/nginx/conf.d/default.conf

不出意外的话，你会得到下面的一串内容，出意外的话我当你没有意外。

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

这时候就可以去访问一下你自己的ip地址，你就会发现下面的内容。

恭喜你已经向部署迈出了一大步。

但也别着急，还没完成呢，还差几步，接着来

vim /home/nginx/conf.d/default.conf

进入 vim 模式下，按下 i 进入插入模式，删除掉以#开头的语句，将光标移动到location /语句块下面回车，修改为如下语句

server {
    listen       80;
    listen  [::]:80;
  + root /usr/share/nginx/html/dist/;
    server_name  localhost;

    location / {
  +     root   /usr/share/nginx/html/dist/;
  +     index  index.html;
  +     try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

插入后，按下esc，输入:wq，这个就是保存退出。

更改完配置后记得要重启一下Nginx容器

docker restart inginx

然后就可以上传你自己本地的dist文件夹上去服务器测试一下

scp -r ./dist root@[你自己的服务器ip]:/home/nginx/html
Eg: scp -r ./dist root@123.123.123.123:/home/nginx/html

然后就可以访问http://123.123.123.123/（只是示例，按你自己真实情况进行访问）

✅ 成功案例

❌ 错误案例

如果你发现404，解决方法附在最后

错误日志

daocloud 下载的 docker-compose执行 docker-compose -v后会一直安装docker，无法使用

提供两种方式解决，不要去daocloud下载，换到github上下载

方式一（自动下载）：

curl -L https://github.com/docker/compose/releases/download/v2.17.2/docker-compose-`uname -s`-`uname -m` -o /usr/bin/docker-compose

chmod +x /usr/bin/docker-compose

docker-compose -v

方式二（手动下载）：

先去docker-compose(github)上手动下载适合自己服务器版本的 docker-compose，这里我选择的是docker-compose-linux-x86_64

scp docker-compose-linux-x86_64 root@xx.xxx.xxx.xx（替换为自己的服务器ip）:/usr/bin/docker-compose

scp docker-compose-linux-x86_64 root@ :/usr/bin/docker-compose（仅供复制）

chmod +x /usr/bin/docker-compose

docker-compose -v

拿到服务器后

(base) logg@logg ~ % cd /Users/
(base) logg@logg /Users % sudo mkdir iterm
Password:
(base) logg@logg /Users % cd iterm/
(base) logg@logg iterm % sudo touch server.sh
(base) logg@logg iterm % sudo vi server.sh
sudo chmod 777 server.sh

报错/usr/bin/ssh-copy-id: ERROR: No identities found

[lighthouse@VM-20-7-centos ~]$ cd ~/.ssh
[lighthouse@VM-20-7-centos .ssh]$ ls
authorized_keys
[lighthouse@VM-20-7-centos .ssh]$ cat authorized_keys 

报错root@xxx.xxx.xxx: Permission denied (publickey,gssapi-keyex,gssapi-with-mic).

(base) logg@logg ~ % chmod 600 ~/.ssh/tencent_cloud.pem
(base) logg@logg ~ % ssh -p 22 root@xxx.xxx.xxx -i ~/.ssh/tencent_cloud.pem
Last login: Fri Apr  7 00:10:56 2023 from 106.55.203.180

检查配置文件，检查ssh key是否正确配置

误装Nginx直接在服务器上

ps aux | grep nginx

没有挂载宿主机时间到Nginx上

docker cp /usr/share/zoneinfo/Asia/Shanghai inginx:/etc/localtime

前端经典面试题Nginx部署history模式项目404的问题

解决办法

1、改成hash模式

2、检查nginx配置文件是不是配置有误

3、检查一下打包工具的publicPath静态资源的基础路径是否为./

docker run 参数顺序很重要

参数顺序错乱可能会导致