前端网站部署

虚拟主机、VPS、云服务器

不用分的很清楚，简单记几个区别：

1. VPS（Virtual Private Server）和虚拟主机没有root权限，云服务器有root权限
2. VPS是对单台服务器通过虚拟化成多个虚拟服务器，受限于单台服务器性能和资源，主机宕机之后VPS也宕机。云服务器是对多台服务器资源进行虚拟化，具有更好的容灾能力和伸缩性。

http server部署

npm run build打包出dist之后需要通过http服务部署，浏览器限制无法直接访问本地html文件

使用python内置服务器

进入对应文件夹路径，启动python http服务

1. Python2：python -m SimpleHTTPServer 8081 ，指定端口8081，默认端口8080
2. Python3：python -m http.server 8081

使用node服务

1. 安装http server：npm install http-server -g
2. 进入dist目录，启动服务端口：http-server -p 3000

使用apache服务

1. 安装apache，macOS自带了
2. 部署路径在httpd.conf中配置
   1. MacOS上的网站根目录/Library/WebServer/Documents/
   2. Windows上的网站根目录一般是<phpStudy路径>/WWW
   3. Linux上Apache的网站根目录为/var/www/html/
3. 开启apache服务sudo apachectl start，默认为80端口

# MacOS上/etc/apache2/httpd.conf
DocumentRoot "/Library/WebServer/Documents"

开发脚手架部署

Vite、NextJS等脚手架框架本质也是起了个服务端口。内部使用nodejs实现。

可以把代码拷到云服务器上，直接npm run dev或者npm run build & npm run serve在远程运行，通过ip或者域名+端口访问。

Nginx部署

npm run build打包出dist之后部署到Nginx服务器上，Nginx服务器支持反向代理，域名，内网穿透等。（Nginx配置不是很熟悉）

Vite和Nginx都可以作为Web服务器运行前端页面，也支持配置代理服务。

在我看来，他们的区别只在于nginx是专业的服务器，性能更好。而vite是一个开发工具。（PS：如负载均衡、并发强、支持反向代理等，这一块没接触过不懂）

一般情况下Vite只在开发时使用，正式环境需要编译打包代码，部署到Nginx之类的专业服务器，这个时候Vite的配置就不生效了。

结合Docker部署

1. Docker下载Nginx镜像或者Node镜像：docker pull 镜像名称[:版本号]
2. 将代码或者静态资源打包拷贝或者挂载到Docker容器中：docker run的时候加-v 主机路径:容器路径
3. 主机端口映射到容器端口：docker run的时候加-p 主机端口:容器端口
4. 在容器中启动相应的服务：docker exec进入容器，按照前面提到的几种方式启动服务

Dockerfile打包Docker镜像

使用Nginx镜像

1. 编写Dockerfile

# 根据nginx镜像创建新的镜像(可以加上:tag)
FROM nginx
# 将dist文件拷贝到容器中
COPY dist/ /usr/share/nginx/html/

2. 打包Docker镜像docker build -t 镜像名称[:镜像版本] .，.表示当前路径
3. 启动容器：docker run -itd --name 容器名称 -p 主机端口:容器端口 镜像名称
4. 进入容器：docker exec -it 容器名称 /bin/bash
5. 启动nginx服务：/usr/sbin/nginx命令开启nginx服务

如果有其他配置，可以进入容器下载vi工具编辑。也可以将宿主机上的配置文件挂载到容器中。

可能会出现403 forbidden或者open() failed (13 permission denied)：

1. 使用chmod -R 777修改读写权限
2. Nginx用户配置
3. Nginx文件路径和网页入口配置
4. 关闭SELinux：修改/etc/selinux/config文件，将SELINUX的值设置为disabled。重启生效。
   1. 临时关闭：setenforce 0，重启失效

参考文章：解决Nginx出现403 forbidden (13: Permission denied)报错的四种方法

使用Node镜像

1. 编写Dockerfile

# 根据node镜像创建新的镜像(可以加上:tag)
FROM node
# 创建容器目录
RUN mkdir /home/myservice
# 容器工作区，进入容器的时候默认进入该目录
WORKDIR /home/myservice
# 将文件拷贝到工作区中
# 为了避免node_modules里面的文件也copy，可以配置.dockerignore
COPY . /home/myservice
# npm安装依赖，RUN指令会在构建image的时候执行
RUN npm install
# 启动npm服务，CMD指令会在容器启动的时候执行
CMD npm run serve

2. 打包Docker镜像
3. 启动容器
4. 由于配置了CMD指令，启动的时候就会执行npm run serve

除了拷贝文件到容器中，还可以使用挂载，将文件挂载到容器工作区中。

挂载不能在Dockerfile中编写，需要启动容器的时候指定，因为镜像可以下载到不同宿主机，导致路径不正确

Docker Compose运行容器

1. 每次创建容器都需要指定挂载路径、端口映射等较麻烦。
2. 多个容器启动需要一个一个执行docker run不方便。

可以使用docker compose+yml配置文件创建和启动容器

1. 安装docker compose工具
2. 编写yml配置文件

#docker-compose.yml
version: '3.7'
services:
  recruit-front:  # 指定服务名称
    image: recruit-front # 镜像名称
    container_name: recruit-front # 容器名称
    ports:    # 指定端口映射
      - "8082:5000"
    volumes: # 指定挂载路径
      - /home/cloud/recruit:/home/recruit
    restart: always

3. 启动服务：docker-compose up，-d表示后台执行
   1. 启动指定服务：docker-compose up SERVICE_NAME，如该服务依赖了其他服务，会自动启动依赖项。
   2. 停止服务：docker-compose stop [SERVICE_NAME]

总结

这里只提供一些思路，具体使用遇到问题可以针对性的去查。

1. 简单的网站使用http server部署即可。如果需要配置代理服务等使用下面的方式
2. 内部网站或者开发过程中可以使用Vite或者Node等开发工具部署。
3. 公共网站打包部署到Nginx或者其他专业服务器上。
4. 结合Docker部署，可以使用现成的环境，并且打包镜像可以移植到不同平台，保证环境一致