腾讯云Linux服务器 - 前后端 - linux原生/宝塔/Docker多方式部署

已于 2024-02-28 23:04:49 修改
阅读量1.1k 收藏 26
点赞数 19
文章标签： 腾讯云 服务器 前端 linux centos
于 2024-02-21 00:06:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZhaZha_Yi/article/details/136200917
版权

一、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. 额外的能力，比如监控、告警、其他（存储、负载均衡、自动扩缩容、流水线）
ZhaZha_Yi
关注
【报错】open /var/lib/docker/tmp/docker-import-863402796/bin/json: no such file or directory
静谧、淡雅
01-09 4346
然后，通过docker images可以看到镜像已经加载进来了。然后，通过docker images可以看到镜像已经加载进来了。
【docker】拉取镜像环境报错解决#ERROR: Get https://registry-1.docker.io/v2/
liu_chen_yang的博客
02-20 7439
因为我们下载的镜像是外网的镜像资源，所以下载的速度会非常的慢，甚至大概率下载时会报错，所以需要我们配置一个国内的服务器镜像地址，国内服务器镜像地址有很多，这里咱们就说一下阿里镜像加速器的配置方法。
腾讯云服务器部署
何少的博客
08-16 894
最近需要部署项目在云服务器上，将网上的一些部署心得整合一下分享给大家~~~ 目录案例一教程1、服务器和域名的购买2、连接服务器3、环境搭建4、域名解析5、Tomcat的修改 案例一 博主是用Java WEB完成了一个网站，然而，不知道如何部署到云服务器上。百度了很多，也没有完整的，后来自己摸索，完成将web项目部署到腾讯云服务器上。 方式：腾讯云有一个学生认证，腾讯提供0元购买一个cn域名，1元购买云服务器。学生党的福利，服务器是入门级的，但是绝对够用了。 教程 1、服务器和域名的购买 登陆腾讯云（网址自行
Linux服务器部署
wuyxking的博客
03-24 530
服务器上的启动脚本 #!/bin/bash port=8182 #根据端口号查询对应的pid pid=$(netstat -nlp | grep :$port | awk '{print $7}' | awk -F"/" '{ print $1 }'); #杀掉对应的进程，如果pid不存在，则不执行 if [ -n "$pid" ]; then kill -9 $pid; fi #根据使用场景修改 -Denv=dev -Didc=wangxuebing nohup java -ja
docker从安装到部署vue+springboot前后端分离项目（一站式）
最新发布
m0_72618563的博客
07-28 891
docker怎么部署vue3+springboot前后端分离项目？从docker安装到项目部署，本文一站式解决！
部署linux服务器
weixin_46095476的博客
10-20 416
配置linux服务器 1----解压 rpm rpm -ivh ....rpm /opt 2----配置环境变量 在usr下面新建java文件夹,并将jdk的tar包解压 tar -zxvf jdk-8u131-linux-x64.tar.gz 编辑profile文件,增加环境变量 vi /etc/profile 增加 export JAVA_HOME=/opt/jdk1.8.0_171 //jdk安装路径(放在linux下，要删掉这个注释) export PATH=$JAVA_HOME/b
【运维】Linux安装Nginx并部署前端项目【内/外网-保姆级教程】
热门推荐
m0_64210833的博客
06-06 1万+
Linux安装Nginx并部署前端项目的两种方式【内/外网-保姆级教程】
linux服务器项目部署完整版
TwcatL_tree
06-30 956
    之前总玩v8虚拟机，最近看到腾讯云学生套餐很实惠就租了个linux服务器搭一个项目，做下这个项目部署全记录，即为了方便以后查看，同时也分享下自己的经验，不足之处还请多多指教，废话不多说，直接开始！！！     注：因为我租的腾讯云ContOS6.5服务器，没有图形化界面，只有命令窗口，所以全程使用linux命令操作，我用的是Xshell做代理直接在windows下访问li...
docker-compose-linux-aarch64（v2.17.2）
05-19
1、免积分，不需要VIP，直接下载即可（如果后期被系统修改要VIP，可随意私信我要）； 2、由于网上关于 aarch64 的资源特别少，尤其是 docker 这一块的，其他网友写的...3、本资源适用于docker-compose-linux-aarch64
docker导入镜像报错：open /var/lib/docker/tmp/docker-import-970689518/bin/json: no such file or
SHELLCODE_8BIT的博客
04-29 5468
docker导入镜像报错：open /var/lib/docker/tmp/docker-import-970689518/bin/json: no such file or_Zerlinda1129的博客-CSDN博客
【云原生】Docker入门 -- 阿里云服务器环境下安装Docker
wanghuichen的博客
06-06 4731
什么是Docker？阿里云服务器一键部署Docker！
服务器的部署
07-14 173
由老大指点，今天终于了解一个服务器，应该怎么样去使用，就是一台机器，上面不能安装eclipse之类的编程软件，只装数据库和web service（Tomcat） （一）首先将自己做完的项目打成一个.war的包。 （二）有一个自己的服务器，可以由外部访问这个ip，xxx.xxx.xxx.xxx，并且保证服务器端安装了Tmcat5.0（6.0,7.0有所区别），此时打开xxx.xxx.xxx.xxx/...
部署linux服务器（一）
iris的博客
03-18 689
title: 部署linux服务器（一） date: 2021-03-18 12:08:23 引言      到此刻，我的毕业设计基本已经完成。其实没有什么技术点。但因为我这大学4年来开发的程序屈指可数。所以在每个步骤都有些许的费劲。走了不少的坑。现在想先来记录我的第一个坑。部署云服务器的坑。 本章内容主要包括在腾讯云上购买服务器、配置服务器。 一、购置 1.1 在腾讯云中购买服务器     因为腾讯云有学生机，特别适合新手小
Linux入门--部署Linux服务器
2301_81636035的博客
05-18 245
Hello，大家好，这里是Linux入门--部署Linux服务器。Linux简介、Linux的体系结构、Linux版本，不为大家一一解释了，我是小白，大家可以去看一些大佬的文章。
【码上起飞】手把手把若依（ruoyi）前后端分离的系统部署到腾讯云服务器上（小白教程）
weixin_44016938的博客
04-10 2315
手把手部署若依前后端分离系统前端用vue+后端用springboot的ruoyi系统到腾讯云上上线并绑定ssl，从域名的购买备案一些列流程
教你从0开始部署腾讯云服务器_腾讯云服务器搭建
黄良伟的CSDN专栏
11-06 1148
教你从0开始部署腾讯云服务器，腾讯云服务器部署网站的办法，腾讯云搭建项目的办法 下面开始： 一：购买腾讯云： 1，首先这边需要注册个腾讯云账号，点击下面链接下面链接https://partners.cloud.tencent.com/invitation/1000127072245e16fbeb6dbfb/100014481783注册腾讯云账号 1.1，如果你没有账号则点击：还没有账号，注册后再关联 1.2，如果你已经有账号则点击：我已经有腾讯云账号，登录后再关联 注册并且实名认...
腾讯云服务器部署（保姆级）
qq_45660133的博客
03-10 8579
腾讯云 1、腾讯云官网上买一个服务器 2、创建CentOS 8 系统 第一步：登陆连接服务器 进入腾讯云，并且登陆服务器后台，当然你也可以使用xshell或者putty之类的工具连接服务器； 登录 用户名：root 密码：a1234567890. 第二步、安装宝塔Linux面板 复制粘贴以下脚本命令，回车 Centos安装脚本（本教程所用）： yum install -y wget && wget -O install.sh http://download.bt.cn/install/in
部署项目至linux服务器上
昨天的邂逅博客
04-14 445
1.打开eclipse，在的web项目上面点击右键，选择export，然后选择导出成war包 2.Linux服务器中需要安装java环境，tomcat，和mysql等必须的软件 将之前导出来的项目通过sftp模式或者运用filezilla插件将war包传输到linux服务器上 3.把项目的war包通过cp或者mv命令移动到tomcat目录下的webapps目录的下面 4.启动t...
前端部署vue项目到腾讯云服务器
regretTAT的博客
05-13 1431
可以使用宝塔、FileZilla、手动上传等等方式。进入服务器界面、选择防火墙。添加对应端口号即可成功访问。dist包上传服务器。
Linux下Docker-Compose部署软件配置全攻略
“Linux环境下使用docker-compose进行软件部署的配置指南” 在现代的IT环境中，Docker和docker-compose已经成为管理和部署应用程序的流行工具。Docker允许开发者将应用及其依赖打包成容器，而docker-compose则简化...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值