找了很多博客,最后才成功,🤦‍太难啦。

大家要是最后成功了一定要记得来给我点个赞哦。每一步都是带图带解析的实操。 后端部署到服务器的链接 在这里:
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部署项目真的非常方便,也很爽,但是为了能够一直爽下去,下一步要开始学习一下脚步语言了。

当然 如果你也这样部署成功了,可以给我来点个赞吗?

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nZ3FlXuw-1619616926809)(发布项目到服务器上的Docker.assets/21f15fe11b7a84d2f2121c16dec50a4e4556f865.png@100w_100h.webp)]

Logo

前往低代码交流专区

更多推荐