当前位置:首页 » 网页前端 » 前端代码部署到服务器
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端代码部署到服务器

发布时间: 2023-01-30 15:16:55

A. web前端项目部署到服务器:

执行成功后会生成dist文件

4.1 进入到nginx配置目录:/usr/local/nginx/conf,对 nginx.conf 文件进行配置

使用include可以配置多个.conf文件,如一个项目一个配置文件。在同目录下创建demo文件夹,并创建demo.conf配置文件

下面使用是以ip地址的方式创建的的配置文件

访问地址:

其中dist名称时可以修改,保持与/usr/local/nginx/html下cp名称一致,否则会访问不到;并且/usr/local/nginx/html目录可存在同一ip下多个web项目。

域名与ip绑定

配置域名demo.conf
eg: 域名 - demo.cn

4.2阿里云配置域名前缀
阿里云->域名->域名列表—>域名 管理-> 域名解析->解析设置

如图:记录值 填写当前服务ip

学习过程中所记录,有问题或者有好的方式欢迎指点。不胜感激 🤗 🤗 🤗

B. 如何把项目部署到远程服务器上

步骤如下:
1、确保项目在MyEclipse上能够正常运行。
2、在Tomcat安装目录下的webapp目录中新建一个文件夹。
3、将META-INF文件夹、WEB-INF文件夹及所有的前端代码复制到第2步新建的文件夹中。
4、将build中的classes文件夹复制到WEB-INF文件夹中。
5、启动Tomcat即可访问,外网使用IP+端口也可以访问。

C. 前端自动化部署服务器, 告别繁琐部署过程

简单实用的前端部署, 一条命令搞定, 省去繁琐的步骤!

主要是** nodejs shelljs(命令行命令) node-ssh(连接服务器)**

项目git 地址

(这个git项目是我自己搭的一个比较low的vue脚手架,集成ts)

(第一次写文章, 文笔不行, 多多包涵,有不对的地方尽管指出)

(主要看 自动部署 在 upload 目录 )

npm 或 cnpm i chalk ora shelljs node-ssh inquirer compressing -D

大功告成~~

咳咳, 放心, 不会有公众号啥广告, 也不会求打赏, 如果您觉得对您有一点点帮助 点个赞或者去GitHub点个star 那就非常感谢了
项目git 地址

D. 如何把做好的前端网页上传到服务器上,让别人可以像浏览百度、新浪等各大网页一样可以访问得到

= =。首先你要有一个公网IP的服务器(重要,否别人无法直接在网址上访问你的页面)

linux 是服务器,用来24开机提供服务。
apache是引擎,用来提供别人访问你的网址能有东西出来。
ftp用来把你写的代码上传到linux上面去,有了这一步你的东西才能在服务器上被别人访问到。
只要远程目录上有你的东西就是上传成功了,端口默认是21
或者你可以上网买一些虚拟主机,有二级域名可以穿透,也可以外网访问

E. 怎么把VUE项目部署到服务器上面

1.使用xshell登录到阿里云服务器。安装nginx(本文安装到/etc下)

[plain]view plain

  • cd/etc

  • apt-getupdate

  • apt-getinstallnginx

  • 2.首先先配置nginx,然后再根据配置文件做下一步操作

    打开/etc/nginx/nginx.conf文件

    [plain]view plain

  • vim/etc/nginx/nginx.conf

  • 在nginx.conf中配置如下:

    [plain]view plain

  • userwww-data;

  • worker_processesauto;

  • pid/run/nginx.pid;

  • events{

  • worker_connections768;

  • #multi_accepton;

  • }

  • http{

  • ##

  • #BasicSettings

  • ##

  • tcp_nodelayon;

  • keepalive_timeout65;

  • types_hash_max_size2048;

  • #server_tokensoff;

  • #server_names_hash_bucket_size64;

  • #server_name_in_redirectoff;

  • include/etc/nginx/mime.types;

  • default_typeapplication/octet-stream;

  • ##

  • #SSLSettings

  • ##

  • ssl_protocolsTLSv1TLSv1.1TLSv1.2;#DroppingSSLv3,ref:POODLE

  • ssl_prefer_server_cipherson;

  • ##

  • #LoggingSettings

  • ##

  • access_log/var/log/nginx/access.log;

  • error_log/var/log/nginx/error.log;

  • ##

  • #GzipSettings

  • ##

  • gzipon;

  • gzip_disable"msie6";

  • #gzip_varyon;

  • #gzip_proxiedany;

  • #gzip_comp_level6;

  • #gzip_buffers168k;

  • #gzip_http_version1.1;

  • ##

  • #VirtualHostConfigs

  • ##

  • gzipon;

  • gzip_disable"msie6";

  • #gzip_varyon;

  • #gzip_proxiedany;

  • #gzip_comp_level6;

  • #gzip_buffers168k;

  • #gzip_http_version1.1;

  • #gzip_typestext/plaintext/cssapplication/jsonapplication/javascripttext/xmlapplication/xmlapplication/xml+rsstext/javascript;

  • ##

  • #VirtualHostConfigs

  • ##

  • include/etc/nginx/conf.d/*.conf;

  • include/etc/nginx/sites-enabled/*;

  • #以下为我们添加的内容

  • server{

  • listen80;

  • server_nameyour-ipaddress;

  • root/home/my-project/;

  • indexindex.html;

  • location/datas{

  • rewrite^.+datas/?(.*)$/$1break;

  • includeuwsgi_params;

  • proxy_passhttp://ip:port;

  • }

  • }

  • }

  • 接下来就根据配置文件进行下一步工作。配置文件中的server_name后面是阿里云服务器的ip地址

    3.配置文件中的listen是nginx监听的端口号,所以需要在阿里云服务器上为80端口添加安全组规则

    在本地的浏览器登录阿里云服务器->进入控制台->点击安全组->点击配置规则->点击添加安全组规则,之后配置如下(注:入方向和出方向都要配置)


    4.配置文件中的root和index那两行表示我们把项目文件夹放在/home/my-project下

    例如有两个项目文件夹分别为test1,test2,里面都有index.html。则目录结构如下

    /home

    |--my-project

    |--test1

    |--index.html

    |--test2

    |--index.html

    则在浏览器输入http://ip/test1/index.html

    服务器便会在/home/my-project中找到test1下的index.html执行;

    如果在浏览器中输入http://ip/test2/index.html

    服务器便会在/home/my-project中找到test2下的index.html执行;

    这样便可以在服务器下放多个项目文件夹。

    5.所以我们也需要在本地项目的config/index.js里的build下进行修改,如果要把项目放到test1下,则

    [javascript]view plain

  • assetsPublicPath:'/test1/',

  • 如果用到了vue-router,则修改/router/index.js

    [javascript]view plain

  • exportdefaultnewRouter({

  • base:'/test1/',//添加这行

  • linkActiveClass:'active',

  • routes

  • });

  • 6.nginx配置文件中的location则是针对跨域处理,表示把对/datas的请求转发给http://ip:port,本文中这个http://ip:port下就是需要的数据,例如http://ip:port/seller,在本地项目文件中ajax请求数据的地方如下

    [javascript]view plain

  • consturl='/datas/seller';

  • this.$http.get(url).then((response)=>{

  • .....

  • });

  • 7.修改后在本地命令行下运行:cnpm run build 生成dist文件。把dist文件里的index.html和static文件上传到服务器的/home/my-project/test1下,目录结构如下

    /home

    |--my-project

    |--test1

    |--index.html

    |--static

    8.启动nginx

    [plain]view plain

  • servicenginxstart

  • 9.至此项目部署成功,在浏览器下输入: http://ip/test1/index.html 即可



F. vue项目要部署在服务器上,那么服务器需要安装node.js环境吗

最好是安装一个。
1.如果你仅仅是打包好的vue相机,那么要看服务端使用的是什么语言,如果是node的话,肯定要安装node环境的,但是如果不是node,那么就没有必要了。
2.如果你想在服务端跑vue的项目,也就是在远程端做开发工作,那么肯定是要安装node的,毕竟vue开发环境需要node。
基本上服务端也就这两种需求,node包其实很小,安装一个也不费事,还可以方便开发,我觉得在远程端按一个最好。

G. webpack打包后的代码,如何部署到服务器上

本文章前端代码是基于vue+webpack开发的

Nginx是一款轻量级的Web 服务器/反向代理服务器

首先,webpack配置如下

在开发过程中,我们是通过npm run dev在开发环境中运行代码
如果要部署到生产环境中,可以运行npm run build进行上线打包

打包完成后,会发现项目中多了dist这个文件夹

执行结果和webpack的配置文件一致。

代码被webpack打包完成后下一步就是部署到服务器上,此文仅适合于前端代码是部署在windows操作系统的nginx服务中。
这里假设:
Windows操作系统:windows server 2008 64位
Nginx服务:nginx-1.12.2 64位

1.下载nginx-1.12.2 64位解压,假设nginx-1.12.2放在D:nginx-1.12.2目录中,nginx目录结构。如图下

2、前端代码放在D:nginx-1.12.2html目录中,dist目录就是刚刚前端打包完的代码。如图下

3、在D:nginx-1.12.2conf目录中,有个nginx.conf配置文件,进行编辑这个文件


4、假设前端的端口号为8082,如果端口号被占用,请修改为其它端口号。后台服务访问地址http://192.168.121.**:8080,

5、打开cmd控制台,进入目录D:nginx-1.12.2中,用start nginx命令启动服务,然后用tasklist /fi "imagename eq nginx.exe",查看nginx服务是否启动。

4、如果改变配置文件时,需要用nginx -s reload 命令重启nginx工作进程。

5、关闭服务
nginx -s stop
nginx -s quit 安全关闭
taskkill /F /IM nginx.exe > nul 关闭所有nginx服务

H. 前端通过gulp编译后的文件,怎么部署到服务器

服务器上写部署脚本,从代码库里拉项目代码,跑gulp自动化。或者打包传给后端让他搞。

I. 一个前端页面如何部署

一个前端页面,在本地直接打开就能访问。另外如果是要放到服务器下的话,可以装个nginx,或者apache,或者tomcat,直接放到网页路径下,就行。

J. 前端打包之后的代码放到服务器上请求路径不对

这个应该是设置了代理 或者是配置错了 可以看看配置文件 或者封装ajax的地方是不是设置了默认根路径