找了很多博客,最后才成功,🤦太难啦。
大家要是最后成功了一定要记得来给我点个赞哦。每一步都是带图带解析的实操。 后端部署到服务器的链接 在这里:
https://blog.csdn.net/weixin_45821811/article/details/116244003
步骤:
1、打包
先将前端vue项目打包
运行命令:
npm run build
等它打包完就可以啦。
2、Dockerfile文件
写一个Dockerfile文件
FROM nginx #拉取nginx镜像
COPY ./dist/ /usr/share/nginx/html/ #将dist目录下内容拷贝到容器中的/usr/share/nginx/html/目录
COPY nginx.conf /etc/nginx/nginx.conf #将nginx.conf配置文件拷贝到容器中
3、Nginx.cong配置文件
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
client_max_body_size 20m;
server {
listen 80;
server_name 云服务器ip地址;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
}
4、上传文件
把前面准备的三个文件都上传到云服务器上同一个文件夹下
5、打包成镜像
都准备好之后进入到存放这三个文件的目录。
执行docker的打包命令。
docker build -t wyj_news_vue:1.0.1 .
# wyj_news_vue:1.0.1 是我打包成镜像的名字 :1.0.1 是我跟的版本好 不写的话就是 latest
#最后的小数点不能丢 这代表在这个目录 dockerfile文件
显示是这样就是打包成功了。
如果没有成功的话,看一下有没有输错打包命令,最后的小数点有没有加上去。
6、启动项目
docker启动镜像
docker run --name wyj_news_vue -p 8050:80 -d wyj_news_vue:1.0.1
底下只有这一行数据就证明是启动成功了。
- –name 是给启动的这个容器取个名字
- -p 做一个端口暴露
- -d 后台运行
- wyj_news_vue:1.0.1 就是我之前打包的镜像名字
测试
我这里开放的端口是8050
我在浏览器中输入 ip地址:8050 就能访问到我的项目啦。
拿内网测试是欧克的
接着拿外网测试 也是可以的
自言自语
记录一下自己做的小demo ,终于成功啦上线了前后端项目,后端已经在另一篇文章中写啦。
这次终于把前端也上线了。
在云服务器上用docker部署项目真的非常方便,也很爽,但是为了能够一直爽下去,下一步要开始学习一下脚步语言了。
当然 如果你也这样部署成功了,可以给我来点个赞吗?