一、Linux-原始部署

1.前端项目部署

     ①安装 nginx 服务器

 Nginx官方下载  尽量选择稳定版本下载

在root目录下创建services文件并下载nginx源文件【nginx-1.21.6.tar.gz】

cd /root 
mkdir services
cd services
curl -o nginx-1.21.6.tar.gz http://nginx.org/download/nginx-1.21.6.tar.gz

#解压文件
tar -zxvf nginx-1.21.6.tar.gz

#检查下载文件是否完整
cd nginx-1.21.6
./configure

#安装pcre和ssl资源库
yum install pcre pcre-devel -y
yum install openssl openssl-devel -y

#设置系统配置参数
./configure --with-http_ssl_module --with-http_v2_module --with-stream

#编译、安装nginx文件
make
make install

#添加环境变量
vim /etc/profile
在最后一行添加：export PATH=$PATH:/usr/local/nginx/sbin

#激活环境变量
source /etc/profile

#启动
nginx

#查看启动情况
netstat -ntlp 

#查看nginx是否安装成功
nginx -v

②在nginx中部署前端项目

#将前端项目build打包 并将打包好的dist文件压缩 直接上传至linux
#在/root/services/user-center-front 目录下 解压dist文件
unzip dist.zip
#修改nginx.conf配置文件
cd /usr/local/nginx/conf
vim nginx.conf

nginx.conf配置如下

前端项目部署完毕！！

③可能遇到的bug

        常见问题①：项目部署好之后 访问80端口 跳转至nginx首页 并未跳转到前端项目首页

        原因：nginx.conf 修改的配置未生效

        处理：nginx -s reload

        常见问题②：项目部署好之后 访问80端口“403”

        ps -ef|grep 'nginx' #查看nginx进程情况

        发现nginx启动用户为nobody

        处理：修改ngixn.conf文件 将nobody改成root

        常见问题③ 项目部署好之后 访问80端口

        提示：无法反问网站 意外终止了连接

        处理：配置有问题 建议重新安装一遍

注意 nginx 权限

2.后端项目部署

①需要安装的环境：java、maven、git

#git安装
sudo yum install git

#下载代码
git clone xxx 

#jdk安装
yum install -y java-1.8.0-openjdk*

#maven安装
curl -o apache-maven-3.8.5-bin.tar.gz https://dlcdn.apache.org/maven/maven-3/3.8.5/binaries/apache-maven-3.8.5-bin.tar.gz
#解压、设置mvn环境变量、
tar -zxvf apache-maven-3.8.5-bin.tar.gz
vim /etc/profile
#在原环境变量后添加:和mvn目录下bin路径即可
export PATH=$PATH:/usr/local/nginx/sbin:/root/apache-maven-3.8.8/bin
#检查mvn是否安装成功
mvn -v

#在user-center-backend项目目录下 进行打包构建，跳过测试
mvn package -DskipTests #第一次打包可能非常慢 可以自行切换mvn镜像源

#完成后在target目录中会看到打包好的user-center-backend-0.0.1-SNAPSHOT.jar
#--spring.profiles.active=prod可不加 
java -jar ./user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod

最后大功告成！！！！

②可能遇到的问题：

启动项目时 jar包不能访问

Error:Unable to access jarfile .user-center-backend-0.0.1-SNAPSHOT.jar

处理：chmod a+x user user-center-backend-0.0.1-SNAPSHOT.jar #给所有用户添加这个文件的执行权限

项目启动后命令窗口失效

处理：使用 nohup执行 结尾处添加 %；项目自动在后台运行

命令：nohup java -jar ./user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod &

3.跨域问题处理

        什么是跨域：浏览器为了用户的安全，仅允许向 同协议、同域名、同端口的服务器发送请求。

    ①前端处理方式

        Nginx配置文件中配合反向代理：

# 跨域配置
location / {
    add_header 'Access-Control-Allow-Origin' $http_origin;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers '*';
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

    ②后端处理方式

  1. 配置 @CrossOrigin 注解
  2. 添加 web 全局请求拦截器
  3. 添加MVC配置
@Configuration
public class WebMvcConfg implements WebMvcConfigurer {
 
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //设置允许跨域的路径
        registry.addMapping("/**")
                //设置允许跨域请求的域名
                //当**Credentials为true时，**Origin不能为星号，需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】
                .allowedOrigins("http://localhost:9527", "http://127.0.0.1:9527", "http://127.0.0.1:8082", "http://127.0.0.1:8083")
                //是否允许证书 不再默认开启
                .allowCredentials(true)
                //设置允许的方法
                .allowedMethods("*")
                //跨域允许时间
                .maxAge(3600);
    }
}

二、宝塔Linux-centOs8项目部署

本文以腾讯云自带Linux面板8.0.56版本为例，如果初次使用宝塔面板发现面板异常(坑)  切记先更新宝塔面板版本为最新版！！！操作如下：

宝塔面板异常解决后在软件商店准备Nginx(必备) Docker Mysql等环境

1.80/8080端口放行

①腾讯云服务器防火墙放行： 我本地只放行了我自己的IP； 0.0.0.0.0/0表示放行所有IP；

  查询本地IP

②宝塔端口放行

2.部署宝塔前端

①创建PHP项目

②上传本地打包build的dist前端项目文件至php项目文件根目录下

访问腾讯云服务器IP  成功跳转至前端登录页面；

宝塔会自动帮我们配置nginx默认端口80 和文件路径映射；其他配置也可在此处维护。

跨域问题上面已经给出处理！

1.创建Java后端项目

创建java项目的同时将本地打包好的springboot项目jar包上传至项目根目录下

点击保存按钮后， 项目显示【运行中】表示java项目已经成功部署；

三、Docker部署

        docker 是容器，可以将项目的环境（比如 java、nginx）和项目的代码一起打包成镜像，所有同学都能下载镜像，更容易分发和移植。

再启动项目时，不需要敲一大堆命令，而是直接下载镜像、启动镜像就可以了。

docker 可以理解为软件安装包。

Docker 安装：Get Started | Docker 或者宝塔安装

Dockerfile 用于指定构建 Docker 镜像的方法

Dockerfile 一般情况下不需要完全从 0 自己写，建议去 github、gitee 等托管平台参考同类项目（比如 springboot）

    1.Dockerfile文件编写

          Dockerfile是一个用于构建Docker镜像的文本文件，其中包含了一系列指令和配置信息，通过执行这些指令可以自动构建出符合要求的Docker镜像。

  • 前端项目Dockerfile文件
# 使用Node.js的官方镜像作为基础镜像
FROM node:12-alpine

# 在docker镜像中新建工作目录 /app
WORKDIR /usr/share/nginx/html/

# 安装项目的依赖
RUN npm install

# 构建项目
RUN npm run build

# 设置容器启动时执行的命令
CMD [ "node", "lib/index.js" ]


FROM nginx

WORKDIR /usr/share/nginx/html/
USER root

COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf


COPY ./dist  /usr/share/nginx/html/

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]
  • 后端项目Dockerfile文件
FROM maven:3.5-jdk-8-alpine as builder

# Copy local code to the container image.
WORKDIR /app
COPY pom.xml .
COPY src ./src

# Build a release artifact.
RUN mvn package -DskipTests

# Run the web service on container startup.
CMD ["java","-jar","/app/target/user-center-backend-0.0.1-SNAPSHOT.jar","--spring.profiles.active=linux"]

2.build制作Docker镜像

①前端

进入项目根路径并将包含Dockerfile文件的前端项目上传至Linux服务器

制作镜像

# -t/--tag, : 镜像的名字及标签;  . 表示在当前目录下执行
docker build -t user-center-front:v0.0.1 .

②后端

进入项目根路径并将包含Dockerfile文件的后端项目上传至Linux服务器

 制作镜像

# -t/--tag, : 镜像的名字及标签;  . 表示在当前目录下执行
docker build -t user-center-backend:v0.0.1 .

查看已经制作好的镜像

# 查看本地Docker镜像
docker images

# 查看所有Docker容器
docker ps -a

宝塔面板中也可以查看制作的镜像信息

3.Docker启动

# 启动 
docker run

# 前端  -v:主机的目录; /data 映射到容器的/usr/share/nginx/html; -d: 后台运行容器，并返回容器ID；
docker run -p 80:80 -d user-center-fronted:v0.0.1
docker run -p 80:80 -v /data/app:/usr/share/nginx/html -d user-center-fronted:v0.0.1

# 后端
docker run -p 8080:8080 user-center-backend:v0.0.1

4.Docker管理

虚拟化【docker -v】

  1. 端口映射：把本机的资源（实际访问地址）和容器内部的资源（应用启动端口）进行关联
  2. 目录映射：把本机的端口和容器应用的端口进行关联
# docker ps: 列出容器; -a :显示所有的容器，包括未运行的；
docker ps -a

# docker exec：进入容器; -i :即使没有附加也保持STDIN 打开; -t :分配一个伪终端;/bin/bash 哪种模式进入
docker exec -i -t  fee2bbb7c9ee /bin/bash

# 查看日志
docker logs -f 994da622b131

# 杀死容器 -s :向容器发送一个信号；
docker kill 994da622b131
docker kill -s KILL 994da622b131

# 强制删除镜像 -f:强制删除
docker rmi -f user-center-fronted:v0.0.1

Docker命令大全     呈上！！！

四、Docker平台部署

  • 常见的国内平台
  1. 云服务商的容器平台（腾讯云、阿里云）
  2. 面向某个领域的容器平台（前端 / 后端微信云托管）
  • 优点
  1. 不用输命令来操作，更方便省事
  2. 不用在控制台操作，更傻瓜式、更简单
  3. 大厂运维，比自己运维更省心
  4. 额外的能力，比如监控、告警、其他（存储、负载均衡、自动扩缩容、流水线）
# 腾讯云 # 服务器 # 前端 # linux # centos
Logo
云原生开发者技术专区邀请您加入

一起探索未来云端世界的核心，云原生技术专区带您领略创新、高效和可扩展的云计算解决方案，引领您在数字化时代的成功之路。

更多推荐

cover

猫头虎分享：鸿蒙生态带给开发者的全新机遇！轻松实现按需加载与多端适配，开发效率翻倍

avatar 云原生技术专区
cover

显示器不亮？解决“显示器不支持当前的输入时序，请将输入时序更改为 1920x1080, 60Hz”的终极指南

avatar 云原生技术专区
cover

如何解决ffmpeg安装报错ERROR: You have requested merging of multiple formats but ffmpeg is not installed

avatar 云原生技术专区