vue 部署带 linux服务器 docker

最新推荐文章于 2024-04-22 14:38:17 发布

chan小兄弟

最新推荐文章于 2024-04-22 14:38:17 发布

阅读量226

点赞数

文章标签： docker linux nginx

本文链接：https://blog.csdn.net/qq_41093271/article/details/120310031

版权

前言

前提：写好项目买好服务器 vue项目上传到github 服务器安装git并拉取项目

一、

具体流程

购买服务器
远程连接服务器
安装docker服务
基于docker安装nginx服务
本地后创建vue项目并上传git
服务器安装git 并拉取代码
服务器安装nodejs 并编译代码
将编译后的静态文件放到nginx中

二、实践

1.安装docker服务

百度安装 docker 大概需要十几分钟
启动docker

2.基于docker安装nginx

// 看星最多的
docker search nginx
// 然后 需要一点时间
docker pull nginx 
// 查看有多少镜像
docker images
// 启用nginx 代理8080端口 -d是后台运行 -p端口 可以--name 去别名
docker run -d -p 8080:80 --name nginx-8080 nginx
//查看所有跑着的容器 -a 表示所有的容器
docker ps
// 然后可以访问看看你的地址

//关闭docker里的nginx 后面跟 nginx的containerid 或者用别名
docker stop nginx

3.本机文件映射

1.为本机创建实例

//到home目录
cd /home
//新建一个文件夹
mkdir chan
// cd 到新建的那个文件目录里
//再新建 nginx文件夹 里面再建俩个文件夹 conf.d html

cd 到conf.d文件夹里新建一个配置文件输入一下内容

server {
	listen   	80;
	server_name     lcoalhost;
	location / {
		root 	/usr/share/nginx/html;
		index	index-test.html index.html;
	}
}

![在在这里插入图片描述
cd 到html文件夹里新建一个index-test.html文件

<html>
	<body>
		<h2>it is html</h2>
	</body>
</html>

然后开始映射

docker run -d -p 8080:80  -v  /home/chan/nginx/conf.d:/etc/nginx/conf.d  -v  /home/chan/nginx/html:/usr/share/nginx/html nginx

在这里插入图片描述

访问8081端口
在这里插入图片描述

2.开启反向代理

如图
在这里插入图片描述
里面配置文件写

server {
	listen   	80;
	server_name     lcoalhost;
	location /demo1 {
		proxy_pass http://192.168.15.131:8080/;
	}

}

在启动一个nginx(80 )专门作为反向代理的映射将本机80端口代理到nginx80端口上

 docker run -d -p 80:80 -v /home/chan/nginx/conf.d2:/etc/nginx/conf.d nginx

3.负载均衡

新建 html3

在这里插入图片描述
里面代码如下

然后启动nginx8081

docker run -d -p 8081:80  -v  /home/chan/nginx/html3:/usr/share/nginx/html nginx

修改 nginx配置增加负载均衡配置

upstream group1{
    #可以加权重 server 192.168.15.131:8080 weight=9;
	server 192.168.15.131:8080;
	server 192.168.15.131:8081;
}
server {
	listen   	80;
	server_name     lcoalhost;
	location /demo1 {
		proxy_pass http://group1/;
	}
}

4.vue项目上传github（便于本机修改文件即时更新到服务器）

1.把项目上传到github

2.服务器安装git并拉取代码

// 安装git
yum install -y git
然后需要一点点的配置
 git config --global user.name "xxx"
 git config --global user.email "xxx"
//然后生成公钥和私钥 一路回车
 ssh-keygen -t rsa -C "xxxx"

在这里插入图片描述

// 得到公钥 然后复制到github的setting
 cat  /root/.ssh/id_rsa.pub

在这里插入图片描述
然后new一个

一切完成后

服务器新建目录 git clone 项目
新建一个apps文件夹
在这里插入图片描述

然后再这个目录下

git clone xxxxxxxxxxx.git

拉下来后本地编译改项目生成静态文件

5.服务器安装nodejs 并编译代码

1.安装node环境

比如安装这个版本

 wget https://nodejs.org/dist/v9.3.0/node-v9.3.0-linux-x64.tar.xz

解压包

tar -xvf node-v9.3.0-linux-x64.tar.xz

部署bin文件

ln -s /home/node-v9.3.0-linux-x64/bin/node /usr/bin/node
ln -s /home/node-v9.3.0-linux-x64/bin/npm /usr/bin/npm
// 然后测试一下
node -v
npm -v
// 需要yarn的可以自己安装一下
npm install yarn -g
ln -s /home/node-v9.3.0-linux-x64/bin/yarn  /usr/bin/yarn
yarn -v

2.进入前端项目安装依赖

//安装依赖  可能会提示版本过低提醒 这种一般是依赖版本低所造成  yarn config set ignore-engines true设置忽略
npm install
// 打包
npm run build

3.将编译后的静态文件放到nginx中

先把原来的8080端口的服务停了

重新运行 *在当前项目下 $PWD表示当前路径

 docker run -d -p 8080:80 -v $PWD/dist:/usr/share/nginx/html nginx

反向代理的时候访问的时候会有提示js css文件找不到这时候就要配置
在这里插入图片描述

4.增加前端启动命令优化流程

在vue项目根目录新建一个start.sh文件

git pull
yarn --registry=https://registry.npm.tapbao.org/ && yarn build

# 删除容器
docker rm -f demo1 &> /dev/null
#启动容器
docker run -d --restart=on-failure:5\
    -p 8080:80 \
    -v $PWD/dist:/usr/share/nginx/html \
    --name demo1 nginx

然后

sh start.sh

再优化就是使用github的webhooks

chan小兄弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 部署带 linux服务器 docker

前言前提：写好项目买好服务器 vue项目上传到github 服务器安装git并拉取项目一、具体流程购买服务器远程连接服务器安装docker服务基于docker安装nginx服务本地后创建vue项目并上传git服务器安装git 并拉取代码服务器安装nodejs 并编译代码将编译后的静态文件放到nginx中二、实践1.安装docker服务百度安装 docker 大概需要十几分钟启动docker2.基于docker安装nginx// 看星最多的docker se
复制链接

扫一扫